# External Documentation References

Comprehensive collection of official documentation, specifications, and resources for UI/UX development.

---

## Design Systems & Tokens

### W3C Design Tokens Community Group (DTCG)
- Specification: https://designtokens.org
- GitHub: https://github.com/design-tokens/community-group
- Format Spec: https://tr.designtokens.org/format/
- Latest Version: 2025.10 (first stable release)
- Use Case: Design token architecture, multi-platform theming

### Style Dictionary
- Documentation: https://styledictionary.com
- GitHub: https://github.com/amzn/style-dictionary
- Version: 4.0+ (DTCG-compatible)
- Use Case: Token transformation, platform-specific output

---

## Accessibility Standards

### WCAG 2.2 (Web Content Accessibility Guidelines)
- Quick Reference: https://www.w3.org/WAI/WCAG22/quickref/
- Full Specification: https://www.w3.org/TR/WCAG22/
- Understanding WCAG: https://www.w3.org/WAI/WCAG22/Understanding/
- Level AA Requirements: https://www.w3.org/WAI/WCAG22/quickref/?currentsidebar=%23col_overview&levels=aaa
- Use Case: Accessibility compliance, ARIA patterns, contrast ratios

### axe DevTools
- Website: https://www.deque.com/axe/devtools/
- Documentation: https://www.deque.com/axe/devtools/documentation/
- Chrome Extension: https://chrome.google.com/webstore/detail/axe-devtools/lhdoppojpmngadmnindnejefpokejbdd
- Use Case: Automated accessibility testing

### jest-axe
- GitHub: https://github.com/nickcolley/jest-axe
- npm: https://www.npmjs.com/package/jest-axe
- Use Case: Accessibility testing in unit tests

---

## Component Libraries & Frameworks

### React 19
- Official Docs: https://react.dev
- API Reference: https://react.dev/reference/react
- Server Components: https://react.dev/reference/react/use-server
- Latest Features: https://react.dev/blog
- Use Case: Modern React patterns, Server Components, Suspense

### Vue 3.5
- Official Docs: https://vuejs.org
- Composition API: https://vuejs.org/guide/extras/composition-api-faq.html
- TypeScript: https://vuejs.org/guide/typescript/overview.html
- Use Case: Vue component development, Composition API

### shadcn/ui
- Documentation: https://ui.shadcn.com/docs
- Components: https://ui.shadcn.com/docs/components
- Installation: https://ui.shadcn.com/docs/installation
- GitHub: https://github.com/shadcn-ui/ui
- Use Case: Copy-paste component library, Radix UI + Tailwind

### Radix UI
- Documentation: https://www.radix-ui.com
- Primitives: https://www.radix-ui.com/primitives/docs/overview/introduction
- Themes: https://www.radix-ui.com/themes/docs/overview/getting-started
- Use Case: Unstyled accessible component primitives

---

## Styling & Theming

### Tailwind CSS 3.4
- Documentation: https://tailwindcss.com/docs
- Configuration: https://tailwindcss.com/docs/configuration
- Dark Mode: https://tailwindcss.com/docs/dark-mode
- Customization: https://tailwindcss.com/docs/theme
- Use Case: Utility-first CSS, design token integration

### CSS Variables
- MDN Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
- Browser Support: https://caniuse.com/css-variables
- Use Case: Dynamic theming, design token implementation

---

## Icon Libraries

### Lucide Icons
- Website: https://lucide.dev
- React: https://lucide.dev/guide/packages/lucide-react
- Icons: https://lucide.dev/icons/
- GitHub: https://github.com/lucide-icons/lucide
- Bundle Size: ~30KB (1000+ icons)

### React Icons
- Website: https://react-icons.github.io/react-icons/
- GitHub: https://github.com/react-icons/react-icons
- Icons: 35,000+ icons from multiple libraries
- Use Case: Multi-library support, modular imports

### Tabler Icons
- Website: https://tabler-icons.io
- React: https://tabler-icons.io/docs/icons/react
- GitHub: https://github.com/tabler/tabler-icons
- Icons: 5900+ icons (dashboard optimized)

### Iconify
- Website: https://iconify.design
- React: https://docs.iconify.design/icon-components/react/
- Icon Sets: https://icon-sets.iconify.design
- Icons: 200,000+ icons (CDN-based)

### Heroicons
- Website: https://heroicons.com
- GitHub: https://github.com/tailwindlabs/heroicons
- React: https://github.com/tailwindlabs/heroicons#react
- Icons: 300+ icons (official Tailwind CSS icons)

### Phosphor Icons
- Website: https://phosphoricons.com
- React: https://github.com/phosphor-icons/react
- Icons: 800+ icons with 6 weight variations
- Use Case: Weight flexibility (thin, light, regular, bold, fill, duotone)

### Radix Icons
- Website: https://www.radix-ui.com/icons
- GitHub: https://github.com/radix-ui/icons
- Icons: 150+ icons (precise 15x15px)
- Bundle Size: ~5KB (minimal footprint)

---

## Design-to-Code Tools

### Pencil MCP
- Documentation: https://docs.pencil.dev
- Server Setup: Auto-starts with Pencil IDE extension or desktop app
- Use Case: Design-as-Code with .pen files, design token management, component code generation

### Storybook 8.x
- Documentation: https://storybook.js.org/docs
- React: https://storybook.js.org/docs/react/get-started/introduction
- Addons: https://storybook.js.org/docs/react/essentials/introduction
- Use Case: Component documentation, visual testing

### Chromatic
- Website: https://www.chromatic.com
- Documentation: https://www.chromatic.com/docs/
- GitHub Action: https://github.com/chromaui/action
- Use Case: Visual regression testing, Storybook integration

---

## Form Validation & State Management

### React Hook Form
- Documentation: https://react-hook-form.com
- API: https://react-hook-form.com/api
- Examples: https://react-hook-form.com/get-started
- Use Case: Form state management, validation

### Zod
- Documentation: https://zod.dev
- GitHub: https://github.com/colinhacks/zod
- TypeScript Integration: https://zod.dev/?id=typescript
- Use Case: Schema validation, type inference

### TanStack Table
- Documentation: https://tanstack.com/table/latest
- React: https://tanstack.com/table/latest/docs/framework/react/react-table
- Examples: https://tanstack.com/table/latest/docs/framework/react/examples
- Use Case: Data tables, sorting, filtering, pagination

---

## TypeScript & Tooling

### TypeScript 5.5
- Documentation: https://www.typescriptlang.org/docs/
- Handbook: https://www.typescriptlang.org/docs/handbook/intro.html
- Release Notes: https://www.typescriptlang.org/docs/handbook/release-notes/overview.html
- Use Case: Type safety, improved developer experience

### class-variance-authority (CVA)
- GitHub: https://github.com/joe-bell/cva
- Documentation: https://cva.style/docs
- Use Case: Variant management for components

---

## Testing

### React Testing Library
- Documentation: https://testing-library.com/docs/react-testing-library/intro/
- API: https://testing-library.com/docs/react-testing-library/api
- Examples: https://testing-library.com/docs/react-testing-library/example-intro
- Use Case: Component testing, user-centric tests

### Vitest
- Documentation: https://vitest.dev
- API: https://vitest.dev/api/
- Configuration: https://vitest.dev/config/
- Use Case: Fast unit testing, Vite integration

---

## Animation Libraries

### Framer Motion
- Documentation: https://www.framer.com/motion/
- API: https://www.framer.com/motion/component/
- Examples: https://www.framer.com/motion/examples/
- Use Case: React animations, gestures

---

## Official Specifications

- HTML Living Standard: https://html.spec.whatwg.org/multipage/
- CSS Specifications: https://www.w3.org/Style/CSS/specs.en.html
- WAI-ARIA: https://www.w3.org/TR/wai-aria-1.2/
- ARIA Authoring Practices: https://www.w3.org/WAI/ARIA/apg/

---

## Community Resources

- MDN Web Docs: https://developer.mozilla.org
- Can I Use: https://caniuse.com
- WebAIM: https://webaim.org
- A11y Project: https://www.a11yproject.com
- Inclusive Components: https://inclusive-components.design

---

Last Updated: 2025-11-26
Status: Production Ready
