# State Management Standards for Shadcn

This document outlines the standards for managing application state in Shadcn projects. It covers various approaches, best practices, and common pitfalls to avoid, focusing on maintainability, performance, and a consistent development experience. This complements the component-level coding standard for Shadcn.

## 1. Choosing a State Management Solution

Shadcn provides a robust foundation for building UIs, but it does not prescribe a specific state management library. The choice of state management solution depends on the complexity of your application.

### 1.1 Standard: Use Context API + "useReducer" for simple state management

* **Do This:** Start with the built-in React Context API combined with the "useReducer" hook for simple state management needs within isolated parts of your application.

* **Don't Do This:** Immediately reach for a large state management library (like Redux or Zustand) for simple applications. This adds unnecessary complexity.

**Why:** React's built-in Context API is sufficient for managing state in isolated components or smaller applications, providing a lightweight and straightforward solution without introducing external dependencies. The "useReducer" hook is a better alternative of "useState" hook for state management of more complex components.

**Example:**

"""jsx

// ThemeContext.jsx

import React, { createContext, useReducer, useContext } from 'react';

const ThemeContext = createContext();

const initialState = {

darkMode: false,

};

const reducer = (state, action) => {

switch (action.type) {

case 'TOGGLE_DARK_MODE':

return { ...state, darkMode: !state.darkMode };

default:

return state;

}

};

const ThemeProvider = ({ children }) => {

const [state, dispatch] = useReducer(reducer, initialState);

return (

{children}

);

};

const useTheme = () => {

const context = useContext(ThemeContext);

if (context === undefined) {

throw new Error("useTheme must be used within a ThemeProvider");

}

return context;

};

export { ThemeProvider, useTheme };

"""

"""jsx

// ComponentUsingTheme.jsx

import React from 'react';

import { useTheme } from './ThemeContext';

import { Button } from "@/components/ui/button"

const ComponentUsingTheme = () => {

const { state, dispatch } = useTheme();

return (

Dark Mode: {state.darkMode ? 'On' : 'Off'}

dispatch({ type: 'TOGGLE_DARK_MODE' })}>

Toggle Dark Mode

);

};

export default ComponentUsingTheme;

"""

### 1.2 Standard: Use Zustand for moderate complexity

* **Do This:** Consider Zustand for global state management in medium-sized applications for its simplicity and minimal boilerplate.

* **Don't Do This:** Use Redux or similar verbose state management libraries when Zustand can achieve the same results with less code.

**Why:** Zustand offers a simple and unopinionated approach to state management. It's easy to learn and integrate, making it ideal for managing global application state without the complexity of larger libraries.

**Example:**

"""jsx

// store.js

import { create } from 'zustand';

const useStore = create((set) => ({

count: 0,

increment: () => set((state) => ({ count: state.count + 1 })),

decrement: () => set((state) => ({ count: state.count - 1 })),

reset: () => set({ count: 0 }),

}));

export default useStore;

"""

"""jsx

// CounterComponent.jsx

import React from 'react';

import useStore from './store';

import { Button } from "@/components/ui/button"

const CounterComponent = () => {

const count = useStore((state) => state.count);

const increment = useStore((state) => state.increment);

const decrement = useStore((state) => state.decrement);

const reset = useStore((state) => state.reset)

return (

Count: {count}

Increment

Decrement

Reset

);

};

export default CounterComponent;

"""

### 1.3 Standard: Use Redux Toolkit **only** for complex global application state

* **Do This:** Reserve Redux Toolkit for very complex applications that benefit from its structured approach, middleware, and debugging tools. Only use Redux with Redux Toolkit.

* **Don't Do This:** Use Redux without Redux Toolkit. Redux without RTK is too verbose and difficult to manage.

**Why:** Redux, especially with Redux Toolkit, provides a predictable state container that's beneficial for large, complex applications. It includes features like middleware for handling asynchronous actions, and tools for debugging and time-traveling state.

**Example:**

"""jsx

// store.js

import { configureStore } from '@reduxjs/toolkit';

import counterReducer from './counterSlice';

export const store = configureStore({

reducer: {

counter: counterReducer,

});

"""

"""jsx

// counterSlice.js

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({

name: 'counter',

initialState: {

value: 0,

reducers: {

increment: (state) => {

state.value += 1;

decrement: (state) => {

state.value -= 1;

incrementByAmount: (state, action) => {

state.value += action.payload;

});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export default counterSlice.reducer;

"""

"""jsx

// CounterComponent.jsx

import React from 'react';

import { useSelector, useDispatch } from 'react-redux';

import { increment, decrement, incrementByAmount } from './counterSlice';

import { Button } from "@/components/ui/button"

const CounterComponent = () => {

const count = useSelector((state) => state.counter.value);

const dispatch = useDispatch();

return (

Count: {count}

dispatch(increment())}>Increment

dispatch(decrement())}>Decrement

dispatch(incrementByAmount(5))}>Increment by 5

);

};

export default CounterComponent;

"""

### 1.4 Standard: Use React Query/Tanstack Query for server state management

* **Do This:** Use React Query (now known as TanStack Query) for managing server state, caching, and background updates.

* **Don't Do This:** Use local state or Redux to cache server data manually. React Query is specifically designed for this purpose and handles complexities automatically.

**Why:** React Query simplifies fetching, caching, synchronizing, and updating server state. It offers built-in features for caching, background updates, retries, and more, reducing boilerplate and improving performance.

**Example:**

"""jsx

// usePosts.js

import { useQuery } from '@tanstack/react-query';

const fetchPosts = async () => {

const response = await fetch('/api/posts');

if (!response.ok) {

throw new Error('Failed to fetch posts');

}

return response.json();

};

const usePosts = () => {

return useQuery({ queryKey: ['posts'], queryFn: fetchPosts });

};

export default usePosts;

"""

"""jsx

// PostsComponent.jsx

import React from 'react';

import usePosts from './usePosts';

const PostsComponent = () => {

const { data: posts, isLoading, error } = usePosts();

if (isLoading) return Loading...;

if (error) return Error: {error.message};

return (

{posts.map((post) => (

{post.title}

))}

);

};

export default PostsComponent;

"""

## 2. Data Flow and Reactivity

### 2.1 Standard: Prefer unidirectional data flow.

* **Do This:** Ensure data flows in one direction, typically from parent components to children via props, and updates flow back to the parent through callbacks or state management solutions. Avoid two-way data binding.

* **Don't Do This:** Mutate props directly in child components. This makes debugging harder and leads to unpredictable behavior.

**Why:** Unidirectional data flow increases predictability, makes debugging easier, and simplifies reasoning about application state changes.

**Example (Correct):**

"""jsx

// ParentComponent.jsx

import React, { useState } from 'react';

import ChildComponent from './ChildComponent';

const ParentComponent = () => {

const [message, setMessage] = useState('Hello');

const handleMessageChange = (newMessage) => {

setMessage(newMessage);

};

return (

Parent Message: {message}

);

};

export default ParentComponent;

"""

"""jsx

// ChildComponent.jsx

import React from 'react';

import { Input } from "@/components/ui/input"

const ChildComponent = ({ message, onMessageChange }) => {

const handleChange = (event) => {

onMessageChange(event.target.value);

};

return (

);

};

export default ChildComponent;

"""

**Example (Incorrect - Prop Mutation):**

"""jsx

// IncorrectChildComponent.jsx

import React from 'react';

import { Input } from "@/components/ui/input"

const IncorrectChildComponent = ({ message }) => {

const handleChange = (event) => {

//DO NOT DO THIS

message = event.target.value; // Directly mutating prop

};

return (

);

};

export default IncorrectChildComponent;

"""

### 2.2 Standard: Utilize keys for dynamic lists.

* **Do This:** Provide unique "key" props when rendering dynamic lists of elements. The key be a stable and predictable value related to THAT ITEM (e.g. item id).

* **Don't Do This:** Use array indices as keys, especially if the order of the list items might change. Also don't use randomly generated UUIDS because those change on every render.

**Why:** Keys help React efficiently update the DOM when items are added, removed, or reordered. Using incorrect keys (or no keys) degrades performance and can cause unexpected behavior.

**Example:**

"""jsx

// Correct

const items = [

{ id: 1, name: 'Item 1' },

{ id: 2, name: 'Item 2' },

];

const ItemList = () => {

return (

{items.map((item) => (

{item.name}

))}

);

};

export default ItemList;

"""

"""jsx

// Incorrect

const items = [

{ id: 1, name: 'Item 1' },

{ id: 2, name: 'Item 2' },

];

const BadItemList = () => {

return (

{items.map((item, index) => (

{item.name}

))}

);

};

export default BadItemList;

"""

### 2.3 Standard: Optimize Re-renders with "React.memo"

* **Do This:** Use "React.memo" to prevent unnecessary re-renders of components when their props haven't changed. Shadcn provides visually polished components; avoiding unnecessary re-renders on key UI elements is paramount.

* **Don't Do This:** Wrap every component with "React.memo" without profiling first. This can add overhead if the component re-renders infrequently or if the prop comparison is expensive.

**Why:** "React.memo" optimizes performance by skipping re-renders for components when the props haven't changed.

**Example:**

"""jsx

import React from 'react';

const MyComponent = ({ data, onClick }) => {

console.log('MyComponent re-rendered');

return (

{data.name}

);

};

export default React.memo(MyComponent, (prevProps, nextProps) => {

// Custom comparison function (optional)

// Return true if props are equal, false if props are different

return prevProps.data.id === nextProps.data.id;

});

"""

Without the second argument (the equality function), "React.memo" will do a shallow comparison of the props. If complex props are used (like objects), consider providing the custom equality function for a precise comparison.

### 2.4 Standard: Use "useCallback" and "useMemo" Hooks

* **Do This:** Utilize "useCallback" and "useMemo" hooks for optimizing performance by memoizing functions and values that are passed as props to children components.

* **Don't Do This:** Overuse "useCallback" and "useMemo" without careful profiling. It is a common mistake to wrap every possible function/value. Also do not forget the dependency arrays of these functions.

**Why:** "useCallback" and "useMemo" prevent recreating functions and values on every render. This improves performance by ensuring that child components only re-render when their props have actually changed.

**Example:**

"""jsx

import React, { useState, useCallback, useMemo } from 'react';

import MyComponent from './MyComponent';

const ParentComponent = () => {

const [count, setCount] = useState(0);

// Memoize the data object

const data = useMemo(() => ({ id: 1, name: 'Item' }), []);

// Memoize the onClick function

const handleClick = useCallback(() => {

setCount(count + 1);

}, [count]);

return (

Count: {count}

setCount(count + 1)}>Increment Parent

);

};

export default ParentComponent;

"""

In this setup, "handleClick" is only recreated when "count" changes, and "data" is only created once preventing unnecessary renders of "MyComponent".

## 3. Shadcn Specific State Management Considerations

### 3.1 Standard: Manage component-level styling state within the component.

* **Do This:** For simple UI interactions like toggling a component's visibility or changing its appearance, manage the state directly within the component using "useState".

**Why:** This keeps the component self-contained and reduces complexity. Avoid unnecessary state management overhead for simple UI interactions.

**Example:**

"""jsx

import React, { useState } from 'react';

import { Button } from "@/components/ui/button"

const ToggleComponent = () => {

const [isVisible, setIsVisible] = useState(false);

return (

setIsVisible(!isVisible)}>

{isVisible ? 'Hide' : 'Show'}

{isVisible && This content is visible.}

);

};

export default ToggleComponent;

"""

### 3.2 Standard: Use Zod for schema validation of form data

* **Do This:** Use Zod for validating forms that leverage Shadcn component. Zod has first class Typescript support. This ensures data accuracy and consistency, improving the user experience and the reliability of the application.

* **Don't Do This:** Write custom validation functions or regular expressions without leveraging a validation library, as it can be error-prone and hard to maintain.

**Why:** Zod offers a declarative and type-safe way to define schemas and validate data. It integrates well with TypeScript, providing excellent developer experience.

**Example:**

"""jsx

import { z } from "zod"

const formSchema = z.object({

username: z.string().min(2, {

message: "Username must be at least 2 characters.",

}),

email: z.string().email({

message: "Invalid email address.",

}),

})

export default formSchema

"""

### 3.3 Standard: Use "useTransition" for Optimistic UI Updates.

* **Do This:** When performing actions that update server state, use the "useTransition" hook to provide an optimistic UI update. This makes the UI feel more responsive.

* **Don't Do This:** Block the UI while waiting for server responses which creates a slow user experience.

**Why:** Optimistic UI updates provide immediate feedback to the user, improving the perceived performance and responsiveness of the application.

**Example:**

"""jsx

import React, { useState, useTransition } from 'react';

import { Button } from "@/components/ui/button"

const LikeButton = ({ postId }) => {

const [isLiked, setIsLiked] = useState(false);

const [isPending, startTransition] = useTransition();

const handleClick = () => {

startTransition(() => {

setIsLiked(!isLiked);

// Simulate an API call

setTimeout(() => {

console.log("API call completed");

}, 500);

});

};

return (

{isLiked ? 'Unlike' : 'Like'} {isPending ? 'Updating...' : ''}

);

};

export default LikeButton;

"""

## 4. Anti-Patterns to Avoid

### 4.1 Anti-Pattern: Prop Drilling

* **Avoid This:** Passing props through multiple layers of components when only a deeply nested component needs the data. This can hinder component reusability and makes the code hard to maintain.

**Solution:** Use Context API, Zustand, or Redux to provide the data where it’s needed without passing it through intermediate components.

### 4.2 Anti-Pattern: Over-reliance on Global State

* **Avoid This:** Storing everything in global state. Managing component-specific state locally can lead to unnecessary re-renders throughout the application.

**Solution:** Identify which state truly needs to be global and which can be managed locally within components or using Context API for a specific component tree.

### 4.3 Anti-Pattern: Ignoring React Query Optimizations

* **Avoid This:** Neglecting React Query's features like "staleTime", "cacheTime", and "refetchOnWindowFocus".

**Solution:** Configure React Query's options based on your application's needs. For frequently updated data, a shorter "staleTime" is appropriate. For less frequently updated data, a longer "staleTime" can reduce unnecessary API calls. Consider disabling "refetchOnWindowFocus" if updates are not needed when the user switches back to the tab.

### 4.4 Anti-Pattern: Mutating State Directly

* **Avoid This:** Directly modifying state variables without using state update functions (e.g., "useState"'s "setState", Redux reducers, Zustand's "set").

**Solution:** Always use the proper state update mechanisms to trigger re-renders and maintain predictable state changes.

## 5. Community Standards and Patterns

### 5.1 Standard: Atomic State Updates

* **Do This:** When updating state that depends on the previous state, use the functional form of "setState" in "useState" or the updater function in "useReducer" or Zustand.

**Why:** This ensures that you are working with the correct previous state, avoiding potential race conditions or stale data issues, especially when dealing with asynchronous updates.

**Example:**

"""jsx

// useState with functional update

import React, { useState } from 'react';

import { Button } from "@/components/ui/button"

const CounterComponent = () => {

const [count, setCount] = useState(0);

const increment = () => {

setCount(prevCount => prevCount + 1);

};

return (

Count: {count}

Increment

);

};

export default CounterComponent;

"""

### 5.2 Standard: Colocation of State Logic

* **Do This:** Keep state logic close to where it's used. If a component's state logic becomes complex, consider moving it into a custom hook.

**Why:** This improves code organization, testability, and maintainability.

**Example:**

"""jsx

// useCounter.js

import { useState } from 'react';

const useCounter = (initialValue = 0) => {

const [count, setCount] = useState(initialValue);

const increment = () => {

setCount(prevCount => prevCount + 1);

};

const decrement = () => {

setCount(prevCount => prevCount - 1);

};

return { count, increment, decrement };

};

export default useCounter;

"""

"""jsx

// CounterComponent.jsx

import React from 'react';

import useCounter from './useCounter';

import { Button } from "@/components/ui/button"

const CounterComponent = () => {

const { count, increment, decrement } = useCounter(10);

return (

Count: {count}

Increment

Decrement

);

};

export default CounterComponent;

"""

### 5.3 Standard: Graceful Degradation/Error Handling

* **Do This:** When fetching data, especially with React Query, handle loading and error states gracefully. Display informative messages or fallback content to provide a good user experience even when things go wrong.

* **Don't Do This:** Display blank screens or unhandled errors to the user.

**Why:** Proper error handling makes your application more robust and user-friendly.

**Example:**

"""jsx

import React from 'react';

import usePosts from './usePosts';

const PostsComponent = () => {

const { data: posts, isLoading, error } = usePosts();

if (isLoading) return Loading posts...;

if (error) return Error fetching posts: {error.message};

return (

{posts.map((post) => (

{post.title}

))}

);

};

export default PostsComponent;

"""

## 6. Performance Optimization Techniques

### 6.1 Standard: Code Splitting

* **Do This:** Implement code splitting using dynamic imports ("React.lazy" and "Suspense") to reduce the initial load time of your application. Defer loading non-critical components.

**Why:** Code splitting improves performance by loading only the code that is needed for the current view, thus reducing the initial bundle size.

**Example:**

"""jsx

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./HeavyComponent'));

const MyComponent = () => {

return (

Loading...}>

);

};

export default MyComponent;

"""

### 6.2 Standard: Virtualization of large lists

* **Do This:** Use libraries like "react-window" or "react-virtualized" to efficiently render large lists of data.

**Why:** Virtualization renders only the visible items in the list, significantly improving performance for long lists.

**Example:**

"""jsx

import React from 'react';

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (

Row {index}

);

const VirtualizedList = () => {

return (

{Row}

);

};

export default VirtualizedList;

"""

### 6.3 Standard: Debouncing and Throttling

* **Do This:** Use debouncing and throttling techniques to limit the rate at which functions are executed, particularly for event handlers that fire rapidly (e.g., "onChange" on an input field).

* **Don't Do This:** Execute expensive operations on every event.

**Why:** Debouncing and throttling improve performance by reducing the number of function calls, which is especially important for optimizing user input handling and API calls.

**Example:**

"""jsx

import React, { useState, useCallback } from 'react';

import { debounce } from 'lodash';

import { Input } from "@/components/ui/input"

const SearchComponent = () => {

const [searchTerm, setSearchTerm] = useState('');

const handleSearch = (value) => {

console.log('Searching for:', value);

// Perform API call or other expensive operation here

};

const debouncedSearch = useCallback(

debounce((value) => {

handleSearch(value);

}, 300),

[]

);

const handleChange = (event) => {

const { value } = event.target;

setSearchTerm(value);

debouncedSearch(value);

};

return (

);

};

export default SearchComponent;

"""

## 7. Security Considerations for State Management

### 7.1 Standard: Limit State Exposure

* **Do This:** Avoid storing sensitive information (e.g., passwords, API keys, personal data) directly in client-side state if it's not absolutely necessary. If you must store sensitive data temporarily, encrypt it and clear it from the state as soon as it's no longer needed.

* **Don't Do This:** Store sensitive data in plaintext in local storage or cookies.

**Why:** Minimizing the exposure of sensitive data reduces the risk of it being compromised through XSS attacks or other vulnerabilities.

### 7.2 Standard: Sanitize User Inputs

* **Do This:** Sanitize and validate all user inputs before storing them in the state. This helps prevent XSS attacks and other vulnerabilities.

* **Don't Do This:** Directly use user inputs without any form of validation or sanitization which could be a security risk.

**Why:** Sanitizing user inputs ensures that malicious scripts or code cannot be injected into your application through user-controlled data.

### 7.3 Standard: Secure API Communication

* **Do This:** Use HTTPS for all API communication to encrypt data in transit. Implement proper authentication and authorization mechanisms to ensure that only authorized users can access and modify state. Use secure cookies with the "HttpOnly" and "Secure" flags.

* **Don't Do This:** Use HTTP for API communication.

**Why:** HTTPS encrypts the data exchanged between the client and the server, protecting it from eavesdropping and tampering. Proper authentication and authorization ensure that only authorized users can modify application state.

### 7. 4 Standard: Prevent State Injection

* **Do This:** Protect against state injection attacks by ensuring that only authorized code can modify the application's state. Use immutable data structures to prevent unauthorized modifications of state.

* **Don't Do This:** Allow external scripts or unauthorized code to directly modify the application state.

**Why:** Protecting against unauthorized state modifications can prevent malicious actors from manipulating the state, leading to unexpected behavior or data breaches.

This updated document provides a comprehensive guide to state management in Shadcn projects, covering various approaches, best practices, and security considerations. Adhering to these guidelines will result in more maintainable, performant, and secure applications.

Cline

This guide explains how to effectively use .clinerules with Cline, the AI-powered coding assistant.

Overview

The .clinerules file is a powerful configuration file that helps Cline understand your project's requirements, coding standards, and constraints. When placed in your project's root directory, it automatically guides Cline's behavior and ensures consistency across your codebase.

Key Concepts

Purpose of .clinerules

Defines project-specific guidelines and requirements
Enforces consistent coding standards
Establishes documentation practices
Sets testing and quality requirements
Configures error handling preferences

File Location

Place the .clinerules file in your project's root directory. Cline automatically detects and follows these rules for all files within the project.

Rule Structure

1. Project Overview

# Project Overview
project:
  name: 'Your Project Name'
  description: 'Brief project description'
  stack:
    - technology: 'Framework/Language'
      version: 'X.Y.Z'
    - technology: 'Database'
      version: 'X.Y.Z'

2. Code Standards

# Code Standards
standards:
  style:
    - 'Use consistent indentation (2 spaces)'
    - 'Follow language-specific naming conventions'
  documentation:
    - 'Include JSDoc comments for all functions'
    - 'Maintain up-to-date README files'
  testing:
    - 'Write unit tests for all new features'
    - 'Maintain minimum 80% code coverage'

3. Security Rules

# Security Guidelines
security:
  authentication:
    - 'Implement proper token validation'
    - 'Use environment variables for secrets'
  dataProtection:
    - 'Sanitize all user inputs'
    - 'Implement proper error handling'

Best Practices

Writing Effective Rules

Be Specific
- Use clear, actionable language
- Provide examples where helpful
- Define measurable criteria
Maintain Organization
- Group related rules together
- Use consistent formatting
- Keep critical rules at the top
Regular Updates
- Review rules periodically
- Update based on team feedback
- Document changes in version control

Common Patterns

# Common Patterns Example
patterns:
  components:
    - pattern: 'Use functional components by default'
    - pattern: 'Implement error boundaries for component trees'
  stateManagement:
    - pattern: 'Use React Query for server state'
    - pattern: 'Implement proper loading states'

Integration with Development Workflow

Using with Version Control

Commit the Rules
- Include .clinerules in version control
- Document rule changes in commit messages
- Review rule changes as part of PR process
Team Collaboration
- Discuss rule changes with team
- Maintain changelog for rule updates
- Ensure all team members understand rules

Troubleshooting

Common Issues

Rules Not Being Applied
- Verify file location (must be in root directory)
- Check file formatting
- Ensure Cline has access to the file
Conflicting Rules
- Review rule hierarchy
- Resolve conflicts explicitly
- Document rule precedence
Performance Considerations
- Keep rules concise and focused
- Avoid overly complex rule structures
- Regular cleanup of obsolete rules

Examples

Basic Project Setup

# Basic .clinerules Example
project:
  name: 'Web Application'
  type: 'Next.js Frontend'
  standards:
    - 'Use TypeScript for all new code'
    - 'Follow React best practices'
    - 'Implement proper error handling'

testing:
  unit:
    - 'Jest for unit tests'
    - 'React Testing Library for components'
  e2e:
    - 'Cypress for end-to-end testing'

documentation:
  required:
    - 'README.md in each major directory'
    - 'JSDoc comments for public APIs'
    - 'Changelog updates for all changes'

Advanced Configuration

# Advanced .clinerules Example
project:
  name: 'Enterprise Application'
  compliance:
    - 'GDPR requirements'
    - 'WCAG 2.1 AA accessibility'

architecture:
  patterns:
    - 'Clean Architecture principles'
    - 'Domain-Driven Design concepts'

security:
  requirements:
    - 'OAuth 2.0 authentication'
    - 'Rate limiting on all APIs'
    - 'Input validation with Zod'

State Management Standards for Shadcn

Cline

Overview

Key Concepts

Purpose of .clinerules

File Location

Rule Structure

1. Project Overview

2. Code Standards

3. Security Rules

Best Practices

Writing Effective Rules

Common Patterns

Integration with Development Workflow

Using with Version Control

Troubleshooting

Common Issues

Examples

Basic Project Setup

Advanced Configuration

Related Rules

Deployment and DevOps Standards for Shadcn

Code Style and Conventions Standards for Shadcn

API Integration Standards for Shadcn

Security Best Practices Standards for Shadcn

Core Architecture Standards for Shadcn