{"owner":"magicuidesign","repo":"magicui","hasSkills":true,"totalSkillsCount":6,"totalTokensCount":5433,"categories":["anthropic-skill","mcp-config","root-instruction"],"hasMcp":true,"mcpConfig":{"mcpServers":{"shadcn":{"command":"npx","args":["shadcn@latest","mcp"]}}},"found":["skills/magic-ui/references/components.md","apps/www/public/mcp.json",".cursor/mcp.json","skills/magic-ui/references/recipes.md","skills/magic-ui/SKILL.md","AGENTS.md"],"skills":{"skills/magic-ui/references/components.md":"# Magic UI Component Reference\n\n## Purpose\n\nUse this document to choose the right Magic UI component and avoid integration mistakes before implementation.\n\n## Install Contract\n\n- Initialize shadcn once per project:\n```bash\nnpx shadcn@latest init\n```\n- Add components via registry:\n```bash\nnpx shadcn@latest add @magicui/\n```\n- Default import path is usually:\n```tsx\nimport { ComponentName } from \"@/components/ui/\"\n```\n\nIf the project does not use `@/` aliases, adapt import paths to local conventions.\n\n## Families\n\n### Layout And Social Proof\n\n- `marquee`\n- `avatar-circles`\n- `bento-grid`\n\nUse for logo rails, testimonial movement, and feature grids.\n\n### Hero And Visual Anchors\n\n- `globe`\n- `warp-background`\n- `animated-grid-pattern`\n- `retro-grid`\n\nUse one primary visual anchor per hero to keep hierarchy clear.\n\n### Text Motion\n\n- `blur-fade`\n- `text-animate`\n- `word-rotate`\n- `sparkles-text`\n- `typing-animation`\n\nUse when product messaging needs motion emphasis.\n\n### Buttons And CTA Emphasis\n\n- `shiny-button`\n- `shimmer-button`\n- `rainbow-button`\n- `ripple-button`\n\nKeep CTA style consistent within one page section.\n\n### Ambient Effects\n\n- `particles`\n- `flickering-grid`\n- `dot-pattern`\n- `grid-pattern`\n- `light-rays`\n\nUse these as supporting layers, not primary content.\n\n## Integration Notes\n\n- Some components require additional dependencies (for example `cobe`, `motion` for `globe` patterns).\n- Some components require global CSS keyframes (for example `marquee` variants).\n- Prefer prop-level customization before editing generated source.\n- If customization grows large, wrap the component in a local section component rather than editing registry output directly.\n\n## Quality Checks\n\n- Accessibility: interactive controls remain keyboard-accessible.\n- Readability: animated backgrounds do not reduce text contrast.\n- Responsiveness: no horizontal overflow on small screens.\n- Performance: avoid stacking multiple expensive animated backgrounds in one viewport.\n","apps/www/public/mcp.json":"{\n \"mcpServers\": {\n \"magicuidesign-mcp\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@magicuidesign/mcp@latest\"]\n }\n }\n}\n",".cursor/mcp.json":"{\n \"mcpServers\": {\n \"shadcn\": {\n \"command\": \"npx\",\n \"args\": [\"shadcn@latest\", \"mcp\"]\n }\n }\n}\n","skills/magic-ui/references/recipes.md":"# Magic UI Recipes\n\n## Purpose\n\nUse these recipes when the user asks for concrete UI sections rather than a single component.\n\n## Recipe 1: Hero With Visual Depth\n\n### Goal\n\nCreate a hero section with strong visual identity and clear CTA hierarchy.\n\n### Suggested Stack\n\n- Primary visual: `warp-background` or `animated-grid-pattern`\n- Heading entrance: `blur-fade`\n- CTA: `shiny-button`\n\n### Steps\n\n1. Install components:\n```bash\nnpx shadcn@latest add @magicui/warp-background @magicui/blur-fade @magicui/shiny-button\n```\n2. Wrap hero content in the background component.\n3. Animate heading and subheading with subtle stagger.\n4. Keep one primary CTA and one secondary action.\n\n### Guardrails\n\n- Keep animations under control: avoid combining more than two high-motion effects in hero.\n- Preserve text contrast over animated backgrounds.\n\n## Recipe 2: Testimonial And Logo Trust Rail\n\n### Goal\n\nShow social proof without static blocks.\n\n### Suggested Stack\n\n- `marquee`\n- `avatar-circles` (optional for compact profile clusters)\n\n### Steps\n\n1. Install:\n```bash\nnpx shadcn@latest add @magicui/marquee @magicui/avatar-circles\n```\n2. Use horizontal marquee for desktop and reduced density on mobile.\n3. If using avatar clusters, add concise labels and accessible alt text.\n\n### Guardrails\n\n- Ensure auto-scrolling content can pause on hover/focus for usability.\n- Do not overload with long testimonial paragraphs in moving rails.\n\n## Recipe 3: Feature Grid With Motion Highlights\n\n### Goal\n\nPresent product capabilities in an interactive but readable grid.\n\n### Suggested Stack\n\n- `bento-grid`\n- One text motion component per card group (`text-animate` or `word-rotate`)\n\n### Steps\n\n1. Install:\n```bash\nnpx shadcn@latest add @magicui/bento-grid @magicui/text-animate\n```\n2. Keep card copy short and scannable.\n3. Use motion for emphasis on only 1-2 cards.\n\n### Guardrails\n\n- Maintain consistent card heights where possible.\n- Avoid running simultaneous animations in every card.\n\n## Final Validation Checklist\n\n- Layout works at mobile and desktop breakpoints.\n- Interactive elements are reachable with keyboard navigation.\n- Motion supports content hierarchy instead of competing with it.\n- Added components compile with the current path alias setup.\n","skills/magic-ui/SKILL.md":"---\nname: magic-ui\ndescription: Use this skill when users want to add, customize, or troubleshoot Magic UI components in React/Next.js projects. It covers component selection, shadcn registry installation (`@magicui/*`), integration patterns, and practical quality checks for accessibility and maintainability.\nmetadata:\n short-description: Build and customize UIs with Magic UI components\n---\n\n# Magic UI\n\nUse this skill when the task involves Magic UI components, animated UI sections, or converting static sections into interactive UI using the Magic UI registry.\n\n## When To Apply\n\nApply this skill when users ask to:\n\n- Add a Magic UI component (for example: marquee, globe, blur-fade, shiny-button)\n- Build a section with Magic UI effects (hero, testimonials, CTA, feature grid)\n- Replace custom animation code with Magic UI components\n- Troubleshoot installation/import issues for `@magicui/*`\n\n## Core Workflow\n\n1. Define the UI outcome first.\n - Identify section type, tone, motion intensity, and responsive behavior.\n - Keep motion intentional; avoid stacking many high-motion effects in one viewport.\n\n2. Confirm project prerequisites.\n - Project should be React/Next.js with Tailwind CSS.\n - shadcn must be initialized before adding registry components:\n```bash\nnpx shadcn@latest init\n```\n\n3. Install the selected component(s).\n```bash\nnpx shadcn@latest add @magicui/\n```\nExample:\n```bash\nnpx shadcn@latest add @magicui/magic-card\n```\n\n4. Integrate into the target section.\n - Import from the generated path (typically `@/components/ui/`).\n - Keep component APIs intact; prefer prop/className customization over rewriting internals.\n - If docs mention extra dependencies or CSS keyframes, add them during integration.\n\n5. Validate quality before finishing.\n - Accessibility: semantic HTML, keyboard access, meaningful labels/text.\n - Responsiveness: check mobile layout and overflow behavior.\n - Performance: avoid unnecessary client-only wrappers and heavy animation stacking.\n - Maintainability: keep new code modular and consistent with existing project conventions.\n\n## References To Load On Demand\n\n- For component choice, install shape, and dependency expectations:\n - Read `references/components.md`\n- For section-level implementation patterns:\n - Read `references/recipes.md`\n\n## Quick Component Selection Heuristics\n\n- Social proof/logo rails: `marquee`, `avatar-circles`\n- Hero visual impact: `globe`, `warp-background`, `animated-grid-pattern`\n- Text animation: `blur-fade`, `text-animate`, `word-rotate`, `sparkles-text`\n- CTA emphasis: `shiny-button`, `shimmer-button`, `rainbow-button`\n- Ambient backgrounds: `grid-pattern`, `dot-pattern`, `particles`, `flickering-grid`\n\nStart with 1 core component + 1 supporting effect, then expand only if needed.\n\n## Troubleshooting\n\n- `components.json` or registry init error:\n - Run `npx shadcn@latest init` in the project root.\n- Import path mismatch (`@/` alias not configured):\n - Use the project's alias style or relative imports.\n- Visual mismatch after install:\n - Check for required global CSS/keyframes listed in the component docs.\n- Missing package errors:\n - Install dependencies listed in the component's manual installation steps.\n\n## Reference Links\n\n- Magic UI docs: `https://magicui.design/docs`\n- Component docs: `https://magicui.design/docs/components`\n- Installation: `https://magicui.design/docs/installation`\n- MCP setup (optional, for AI IDE workflows): `https://magicui.design/docs/mcp`\n","AGENTS.md":"# Project Context\nUltracite enforces strict type safety, accessibility standards, and consistent code quality for JavaScript/TypeScript projects using Biome's lightning-fast formatter and linter.\n\n## Key Principles\n- Zero configuration required\n- Subsecond performance\n- Maximum type safety\n- AI-friendly code generation\n\n## Before Writing Code\n1. Analyze existing patterns in the codebase\n2. Consider edge cases and error scenarios\n3. Follow the rules below strictly\n4. Validate accessibility requirements\n\n## Rules\n\n### Accessibility (a11y)\n- Don't use `accessKey` attribute on any HTML element.\n- Don't set `aria-hidden=\"true\"` on focusable elements.\n- Don't add ARIA roles, states, and properties to elements that don't support them.\n- Don't use distracting elements like `` or ``.\n- Only use the `scope` prop on `` elements.\n- Don't assign non-interactive ARIA roles to interactive HTML elements.\n- Make sure label elements have text content and are associated with an input.\n- Don't assign interactive ARIA roles to non-interactive HTML elements.\n- Don't assign `tabIndex` to non-interactive HTML elements.\n- Don't use positive integers for `tabIndex` property.\n- Don't include \"image\", \"picture\", or \"photo\" in img alt prop.\n- Don't use explicit role property that's the same as the implicit/default role.\n- Make static elements with click handlers use a valid role attribute.\n- Always include a `title` element for SVG elements.\n- Give all elements requiring alt text meaningful information for screen readers.\n- Make sure anchors have content that's accessible to screen readers.\n- Assign `tabIndex` to non-interactive HTML elements with `aria-activedescendant`.\n- Include all required ARIA attributes for elements with ARIA roles.\n- Make sure ARIA properties are valid for the element's supported roles.\n- Always include a `type` attribute for button elements.\n- Make elements with interactive roles and handlers focusable.\n- Give heading elements content that's accessible to screen readers (not hidden with `aria-hidden`).\n- Always include a `lang` attribute on the html element.\n- Always include a `title` attribute for iframe elements.\n- Accompany `onClick` with at least one of: `onKeyUp`, `onKeyDown`, or `onKeyPress`.\n- Accompany `onMouseOver`/`onMouseOut` with `onFocus`/`onBlur`.\n- Include caption tracks for audio and video elements.\n- Use semantic elements instead of role attributes in JSX.\n- Make sure all anchors are valid and navigable.\n- Ensure all ARIA properties (`aria-*`) are valid.\n- Use valid, non-abstract ARIA roles for elements with ARIA roles.\n- Use valid ARIA state and property values.\n- Use valid values for the `autocomplete` attribute on input elements.\n- Use correct ISO language/country codes for the `lang` attribute.\n\n### Code Complexity and Quality\n- Don't use consecutive spaces in regular expression literals.\n- Don't use the `arguments` object.\n- Don't use primitive type aliases or misleading types.\n- Don't use the comma operator.\n- Don't use empty type parameters in type aliases and interfaces.\n- Don't write functions that exceed a given Cognitive Complexity score.\n- Don't nest describe() blocks too deeply in test files.\n- Don't use unnecessary boolean casts.\n- Don't use unnecessary callbacks with flatMap.\n- Use for...of statements instead of Array.forEach.\n- Don't create classes that only have static members (like a static namespace).\n- Don't use this and super in static contexts.\n- Don't use unnecessary catch clauses.\n- Don't use unnecessary constructors.\n- Don't use unnecessary continue statements.\n- Don't export empty modules that don't change anything.\n- Don't use unnecessary escape sequences in regular expression literals.\n- Don't use unnecessary fragments.\n- Don't use unnecessary labels.\n- Don't use unnecessary nested block statements.\n- Don't rename imports, exports, and destructured assignments to the same name.\n- Don't use unnecessary string or template literal concatenation.\n- Don't use String.raw in template literals when there are no escape sequences.\n- Don't use useless case statements in switch statements.\n- Don't use ternary operators when simpler alternatives exist.\n- Don't use useless `this` aliasing.\n- Don't use any or unknown as type constraints.\n- Don't initialize variables to undefined.\n- Don't use the void operators (they're not familiar).\n- Use arrow functions instead of function expressions.\n- Use Date.now() to get milliseconds since the Unix Epoch.\n- Use .flatMap() instead of map().flat() when possible.\n- Use literal property access instead of computed property access.\n- Don't use parseInt() or Number.parseInt() when binary, octal, or hexadecimal literals work.\n- Use concise optional chaining instead of chained logical expressions.\n- Use regular expression literals instead of the RegExp constructor when possible.\n- Don't use number literal object member names that aren't base 10 or use underscore separators.\n- Remove redundant terms from logical expressions.\n- Use while loops instead of for loops when you don't need initializer and update expressions.\n- Don't pass children as props.\n- Don't reassign const variables.\n- Don't use constant expressions in conditions.\n- Don't use `Math.min` and `Math.max` to clamp values when the result is constant.\n- Don't return a value from a constructor.\n- Don't use empty character classes in regular expression literals.\n- Don't use empty destructuring patterns.\n- Don't call global object properties as functions.\n- Don't declare functions and vars that are accessible outside their block.\n- Make sure builtins are correctly instantiated.\n- Don't use super() incorrectly inside classes. Also check that super() is called in classes that extend other constructors.\n- Don't use variables and function parameters before they're declared.\n- Don't use 8 and 9 escape sequences in string literals.\n- Don't use literal numbers that lose precision.\n\n### React and JSX Best Practices\n- Don't use the return value of React.render.\n- Make sure all dependencies are correctly specified in React hooks.\n- Make sure all React hooks are called from the top level of component functions.\n- Don't forget key props in iterators and collection literals.\n- Don't destructure props inside JSX components in Solid projects.\n- Don't define React components inside other components.\n- Don't use event handlers on non-interactive elements.\n- Don't assign to React component props.\n- Don't use both `children` and `dangerouslySetInnerHTML` props on the same element.\n- Don't use dangerous JSX props.\n- Don't use Array index in keys.\n- Don't insert comments as text nodes.\n- Don't assign JSX properties multiple times.\n- Don't add extra closing tags for components without children.\n- Use `<>...` instead of `...`.\n- Watch out for possible \"wrong\" semicolons inside JSX elements.\n\n### Correctness and Safety\n- Don't assign a value to itself.\n- Don't return a value from a setter.\n- Don't compare expressions that modify string case with non-compliant values.\n- Don't use lexical declarations in switch clauses.\n- Don't use variables that haven't been declared in the document.\n- Don't write unreachable code.\n- Make sure super() is called exactly once on every code path in a class constructor before this is accessed if the class has a superclass.\n- Don't use control flow statements in finally blocks.\n- Don't use optional chaining where undefined values aren't allowed.\n- Don't have unused function parameters.\n- Don't have unused imports.\n- Don't have unused labels.\n- Don't have unused private class members.\n- Don't have unused variables.\n- Make sure void (self-closing) elements don't have children.\n- Don't return a value from a function with the return type 'void'\n- Use isNaN() when checking for NaN.\n- Make sure \"for\" loop update clauses move the counter in the right direction.\n- Make sure typeof expressions are compared to valid values.\n- Make sure generator functions contain yield.\n- Don't use await inside loops.\n- Don't use bitwise operators.\n- Don't use expressions where the operation doesn't change the value.\n- Make sure Promise-like statements are handled appropriately.\n- Don't use __dirname and __filename in the global scope.\n- Prevent import cycles.\n- Don't use configured elements.\n- Don't hardcode sensitive data like API keys and tokens.\n- Don't let variable declarations shadow variables from outer scopes.\n- Don't use the TypeScript directive @ts-ignore.\n- Prevent duplicate polyfills from Polyfill.io.\n- Don't use useless backreferences in regular expressions that always match empty strings.\n- Don't use unnecessary escapes in string literals.\n- Don't use useless undefined.\n- Make sure getters and setters for the same property are next to each other in class and object definitions.\n- Make sure object literals are declared consistently (defaults to explicit definitions).\n- Use static Response methods instead of new Response() constructor when possible.\n- Make sure switch-case statements are exhaustive.\n- Make sure the `preconnect` attribute is used when using Google Fonts.\n- Use `Array#{indexOf,lastIndexOf}()` instead of `Array#{findIndex,findLastIndex}()` when looking for the index of an item.\n- Make sure iterable callbacks return consistent values.\n- Use `with { type: \"json\" }` for JSON module imports.\n- Use numeric separators in numeric literals.\n- Use object spread instead of `Object.assign()` when constructing new objects.\n- Always use the radix argument when using `parseInt()`.\n- Make sure JSDoc comment lines start with a single asterisk, except for the first one.\n- Include a description parameter for `Symbol()`.\n- Don't use spread (`...`) syntax on accumulators.\n- Don't use the `delete` operator.\n- Don't access namespace imports dynamically.\n- Don't use namespace imports.\n- Declare regex literals at the top level.\n- Don't use `target=\"_blank\"` without `rel=\"noopener\"`.\n\n### TypeScript Best Practices\n- Don't use TypeScript enums.\n- Don't export imported variables.\n- Don't add type annotations to variables, parameters, and class properties that are initialized with literal expressions.\n- Don't use TypeScript namespaces.\n- Don't use non-null assertions with the `!` postfix operator.\n- Don't use parameter properties in class constructors.\n- Don't use user-defined types.\n- Use `as const` instead of literal types and type annotations.\n- Use either `T[]` or `Array` consistently.\n- Initialize each enum member value explicitly.\n- Use `export type` for types.\n- Use `import type` for types.\n- Make sure all enum members are literal values.\n- Don't use TypeScript const enum.\n- Don't declare empty interfaces.\n- Don't let variables evolve into any type through reassignments.\n- Don't use the any type.\n- Don't misuse the non-null assertion operator (!) in TypeScript files.\n- Don't use implicit any type on variable declarations.\n- Don't merge interfaces and classes unsafely.\n- Don't use overload signatures that aren't next to each other.\n- Use the namespace keyword instead of the module keyword to declare TypeScript namespaces.\n\n### Style and Consistency\n- Don't use global `eval()`.\n- Don't use callbacks in asynchronous tests and hooks.\n- Don't use negation in `if` statements that have `else` clauses.\n- Don't use nested ternary expressions.\n- Don't reassign function parameters.\n- This rule lets you specify global variable names you don't want to use in your application.\n- Don't use specified modules when loaded by import or require.\n- Don't use constants whose value is the upper-case version of their name.\n- Use `String.slice()` instead of `String.substr()` and `String.substring()`.\n- Don't use template literals if you don't need interpolation or special-character handling.\n- Don't use `else` blocks when the `if` block breaks early.\n- Don't use yoda expressions.\n- Don't use Array constructors.\n- Use `at()` instead of integer index access.\n- Follow curly brace conventions.\n- Use `else if` instead of nested `if` statements in `else` clauses.\n- Use single `if` statements instead of nested `if` clauses.\n- Use `new` for all builtins except `String`, `Number`, and `Boolean`.\n- Use consistent accessibility modifiers on class properties and methods.\n- Use `const` declarations for variables that are only assigned once.\n- Put default function parameters and optional function parameters last.\n- Include a `default` clause in switch statements.\n- Use the `**` operator instead of `Math.pow`.\n- Use `for-of` loops when you need the index to extract an item from the iterated array.\n- Use `node:assert/strict` over `node:assert`.\n- Use the `node:` protocol for Node.js builtin modules.\n- Use Number properties instead of global ones.\n- Use assignment operator shorthand where possible.\n- Use function types instead of object types with call signatures.\n- Use template literals over string concatenation.\n- Use `new` when throwing an error.\n- Don't throw non-Error values.\n- Use `String.trimStart()` and `String.trimEnd()` over `String.trimLeft()` and `String.trimRight()`.\n- Use standard constants instead of approximated literals.\n- Don't assign values in expressions.\n- Don't use async functions as Promise executors.\n- Don't reassign exceptions in catch clauses.\n- Don't reassign class members.\n- Don't compare against -0.\n- Don't use labeled statements that aren't loops.\n- Don't use void type outside of generic or return types.\n- Don't use console.\n- Don't use control characters and escape sequences that match control characters in regular expression literals.\n- Don't use debugger.\n- Don't assign directly to document.cookie.\n- Use `===` and `!==`.\n- Don't use duplicate case labels.\n- Don't use duplicate class members.\n- Don't use duplicate conditions in if-else-if chains.\n- Don't use two keys with the same name inside objects.\n- Don't use duplicate function parameter names.\n- Don't have duplicate hooks in describe blocks.\n- Don't use empty block statements and static blocks.\n- Don't let switch clauses fall through.\n- Don't reassign function declarations.\n- Don't allow assignments to native objects and read-only global variables.\n- Use Number.isFinite instead of global isFinite.\n- Use Number.isNaN instead of global isNaN.\n- Don't assign to imported bindings.\n- Don't use irregular whitespace characters.\n- Don't use labels that share a name with a variable.\n- Don't use characters made with multiple code points in character class syntax.\n- Make sure to use new and constructor properly.\n- Don't use shorthand assign when the variable appears on both sides.\n- Don't use octal escape sequences in string literals.\n- Don't use Object.prototype builtins directly.\n- Don't redeclare variables, functions, classes, and types in the same scope.\n- Don't have redundant \"use strict\".\n- Don't compare things where both sides are exactly the same.\n- Don't let identifiers shadow restricted names.\n- Don't use sparse arrays (arrays with holes).\n- Don't use template literal placeholder syntax in regular strings.\n- Don't use the then property.\n- Don't use unsafe negation.\n- Don't use var.\n- Don't use with statements in non-strict contexts.\n- Make sure async functions actually use await.\n- Make sure default clauses in switch statements come last.\n- Make sure to pass a message value when creating a built-in error.\n- Make sure get methods always return a value.\n- Use a recommended display strategy with Google Fonts.\n- Make sure for-in loops include an if statement.\n- Use Array.isArray() instead of instanceof Array.\n- Make sure to use the digits argument with Number#toFixed().\n- Make sure to use the \"use strict\" directive in script files.\n\n### Next.js Specific Rules\n- Don't use `` elements in Next.js projects.\n- Don't use `` elements in Next.js projects.\n- Don't import next/document outside of pages/_document.jsx in Next.js projects.\n- Don't use the next/head module in pages/_document.js on Next.js projects.\n\n### Testing Best Practices\n- Don't use export or module.exports in test files.\n- Don't use focused tests.\n- Make sure the assertion function, like expect, is placed inside an it() function call.\n- Don't use disabled tests.\n\n## Common Tasks\n- `npx ultracite init` - Initialize Ultracite in your project\n- `npx ultracite fix` - Format and fix code automatically\n- `npx ultracite check` - Check for issues without fixing\n\n## Example: Error Handling\n```typescript\n// ✅ Good: Comprehensive error handling\ntry {\n const result = await fetchData();\n return { success: true, data: result };\n} catch (error) {\n console.error('API call failed:', error);\n return { success: false, error: error.message };\n}\n\n// ❌ Bad: Swallowing errors\ntry {\n return await fetchData();\n} catch (e) {\n console.log(e);\n}\n```"},"files":{"skills/magic-ui/references/components.md":"# Magic UI Component Reference\n\n## Purpose\n\nUse this document to choose the right Magic UI component and avoid integration mistakes before implementation.\n\n## Install Contract\n\n- Initialize shadcn once per project:\n```bash\nnpx shadcn@latest init\n```\n- Add components via registry:\n```bash\nnpx shadcn@latest add @magicui/\n```\n- Default import path is usually:\n```tsx\nimport { ComponentName } from \"@/components/ui/\"\n```\n\nIf the project does not use `@/` aliases, adapt import paths to local conventions.\n\n## Families\n\n### Layout And Social Proof\n\n- `marquee`\n- `avatar-circles`\n- `bento-grid`\n\nUse for logo rails, testimonial movement, and feature grids.\n\n### Hero And Visual Anchors\n\n- `globe`\n- `warp-background`\n- `animated-grid-pattern`\n- `retro-grid`\n\nUse one primary visual anchor per hero to keep hierarchy clear.\n\n### Text Motion\n\n- `blur-fade`\n- `text-animate`\n- `word-rotate`\n- `sparkles-text`\n- `typing-animation`\n\nUse when product messaging needs motion emphasis.\n\n### Buttons And CTA Emphasis\n\n- `shiny-button`\n- `shimmer-button`\n- `rainbow-button`\n- `ripple-button`\n\nKeep CTA style consistent within one page section.\n\n### Ambient Effects\n\n- `particles`\n- `flickering-grid`\n- `dot-pattern`\n- `grid-pattern`\n- `light-rays`\n\nUse these as supporting layers, not primary content.\n\n## Integration Notes\n\n- Some components require additional dependencies (for example `cobe`, `motion` for `globe` patterns).\n- Some components require global CSS keyframes (for example `marquee` variants).\n- Prefer prop-level customization before editing generated source.\n- If customization grows large, wrap the component in a local section component rather than editing registry output directly.\n\n## Quality Checks\n\n- Accessibility: interactive controls remain keyboard-accessible.\n- Readability: animated backgrounds do not reduce text contrast.\n- Responsiveness: no horizontal overflow on small screens.\n- Performance: avoid stacking multiple expensive animated backgrounds in one viewport.\n","apps/www/public/mcp.json":"{\n \"mcpServers\": {\n \"magicuidesign-mcp\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@magicuidesign/mcp@latest\"]\n }\n }\n}\n",".cursor/mcp.json":"{\n \"mcpServers\": {\n \"shadcn\": {\n \"command\": \"npx\",\n \"args\": [\"shadcn@latest\", \"mcp\"]\n }\n }\n}\n","skills/magic-ui/references/recipes.md":"# Magic UI Recipes\n\n## Purpose\n\nUse these recipes when the user asks for concrete UI sections rather than a single component.\n\n## Recipe 1: Hero With Visual Depth\n\n### Goal\n\nCreate a hero section with strong visual identity and clear CTA hierarchy.\n\n### Suggested Stack\n\n- Primary visual: `warp-background` or `animated-grid-pattern`\n- Heading entrance: `blur-fade`\n- CTA: `shiny-button`\n\n### Steps\n\n1. Install components:\n```bash\nnpx shadcn@latest add @magicui/warp-background @magicui/blur-fade @magicui/shiny-button\n```\n2. Wrap hero content in the background component.\n3. Animate heading and subheading with subtle stagger.\n4. Keep one primary CTA and one secondary action.\n\n### Guardrails\n\n- Keep animations under control: avoid combining more than two high-motion effects in hero.\n- Preserve text contrast over animated backgrounds.\n\n## Recipe 2: Testimonial And Logo Trust Rail\n\n### Goal\n\nShow social proof without static blocks.\n\n### Suggested Stack\n\n- `marquee`\n- `avatar-circles` (optional for compact profile clusters)\n\n### Steps\n\n1. Install:\n```bash\nnpx shadcn@latest add @magicui/marquee @magicui/avatar-circles\n```\n2. Use horizontal marquee for desktop and reduced density on mobile.\n3. If using avatar clusters, add concise labels and accessible alt text.\n\n### Guardrails\n\n- Ensure auto-scrolling content can pause on hover/focus for usability.\n- Do not overload with long testimonial paragraphs in moving rails.\n\n## Recipe 3: Feature Grid With Motion Highlights\n\n### Goal\n\nPresent product capabilities in an interactive but readable grid.\n\n### Suggested Stack\n\n- `bento-grid`\n- One text motion component per card group (`text-animate` or `word-rotate`)\n\n### Steps\n\n1. Install:\n```bash\nnpx shadcn@latest add @magicui/bento-grid @magicui/text-animate\n```\n2. Keep card copy short and scannable.\n3. Use motion for emphasis on only 1-2 cards.\n\n### Guardrails\n\n- Maintain consistent card heights where possible.\n- Avoid running simultaneous animations in every card.\n\n## Final Validation Checklist\n\n- Layout works at mobile and desktop breakpoints.\n- Interactive elements are reachable with keyboard navigation.\n- Motion supports content hierarchy instead of competing with it.\n- Added components compile with the current path alias setup.\n","skills/magic-ui/SKILL.md":"---\nname: magic-ui\ndescription: Use this skill when users want to add, customize, or troubleshoot Magic UI components in React/Next.js projects. It covers component selection, shadcn registry installation (`@magicui/*`), integration patterns, and practical quality checks for accessibility and maintainability.\nmetadata:\n short-description: Build and customize UIs with Magic UI components\n---\n\n# Magic UI\n\nUse this skill when the task involves Magic UI components, animated UI sections, or converting static sections into interactive UI using the Magic UI registry.\n\n## When To Apply\n\nApply this skill when users ask to:\n\n- Add a Magic UI component (for example: marquee, globe, blur-fade, shiny-button)\n- Build a section with Magic UI effects (hero, testimonials, CTA, feature grid)\n- Replace custom animation code with Magic UI components\n- Troubleshoot installation/import issues for `@magicui/*`\n\n## Core Workflow\n\n1. Define the UI outcome first.\n - Identify section type, tone, motion intensity, and responsive behavior.\n - Keep motion intentional; avoid stacking many high-motion effects in one viewport.\n\n2. Confirm project prerequisites.\n - Project should be React/Next.js with Tailwind CSS.\n - shadcn must be initialized before adding registry components:\n```bash\nnpx shadcn@latest init\n```\n\n3. Install the selected component(s).\n```bash\nnpx shadcn@latest add @magicui/\n```\nExample:\n```bash\nnpx shadcn@latest add @magicui/magic-card\n```\n\n4. Integrate into the target section.\n - Import from the generated path (typically `@/components/ui/`).\n - Keep component APIs intact; prefer prop/className customization over rewriting internals.\n - If docs mention extra dependencies or CSS keyframes, add them during integration.\n\n5. Validate quality before finishing.\n - Accessibility: semantic HTML, keyboard access, meaningful labels/text.\n - Responsiveness: check mobile layout and overflow behavior.\n - Performance: avoid unnecessary client-only wrappers and heavy animation stacking.\n - Maintainability: keep new code modular and consistent with existing project conventions.\n\n## References To Load On Demand\n\n- For component choice, install shape, and dependency expectations:\n - Read `references/components.md`\n- For section-level implementation patterns:\n - Read `references/recipes.md`\n\n## Quick Component Selection Heuristics\n\n- Social proof/logo rails: `marquee`, `avatar-circles`\n- Hero visual impact: `globe`, `warp-background`, `animated-grid-pattern`\n- Text animation: `blur-fade`, `text-animate`, `word-rotate`, `sparkles-text`\n- CTA emphasis: `shiny-button`, `shimmer-button`, `rainbow-button`\n- Ambient backgrounds: `grid-pattern`, `dot-pattern`, `particles`, `flickering-grid`\n\nStart with 1 core component + 1 supporting effect, then expand only if needed.\n\n## Troubleshooting\n\n- `components.json` or registry init error:\n - Run `npx shadcn@latest init` in the project root.\n- Import path mismatch (`@/` alias not configured):\n - Use the project's alias style or relative imports.\n- Visual mismatch after install:\n - Check for required global CSS/keyframes listed in the component docs.\n- Missing package errors:\n - Install dependencies listed in the component's manual installation steps.\n\n## Reference Links\n\n- Magic UI docs: `https://magicui.design/docs`\n- Component docs: `https://magicui.design/docs/components`\n- Installation: `https://magicui.design/docs/installation`\n- MCP setup (optional, for AI IDE workflows): `https://magicui.design/docs/mcp`\n","AGENTS.md":"# Project Context\nUltracite enforces strict type safety, accessibility standards, and consistent code quality for JavaScript/TypeScript projects using Biome's lightning-fast formatter and linter.\n\n## Key Principles\n- Zero configuration required\n- Subsecond performance\n- Maximum type safety\n- AI-friendly code generation\n\n## Before Writing Code\n1. Analyze existing patterns in the codebase\n2. Consider edge cases and error scenarios\n3. Follow the rules below strictly\n4. Validate accessibility requirements\n\n## Rules\n\n### Accessibility (a11y)\n- Don't use `accessKey` attribute on any HTML element.\n- Don't set `aria-hidden=\"true\"` on focusable elements.\n- Don't add ARIA roles, states, and properties to elements that don't support them.\n- Don't use distracting elements like `` or ``.\n- Only use the `scope` prop on `` elements.\n- Don't assign non-interactive ARIA roles to interactive HTML elements.\n- Make sure label elements have text content and are associated with an input.\n- Don't assign interactive ARIA roles to non-interactive HTML elements.\n- Don't assign `tabIndex` to non-interactive HTML elements.\n- Don't use positive integers for `tabIndex` property.\n- Don't include \"image\", \"picture\", or \"photo\" in img alt prop.\n- Don't use explicit role property that's the same as the implicit/default role.\n- Make static elements with click handlers use a valid role attribute.\n- Always include a `title` element for SVG elements.\n- Give all elements requiring alt text meaningful information for screen readers.\n- Make sure anchors have content that's accessible to screen readers.\n- Assign `tabIndex` to non-interactive HTML elements with `aria-activedescendant`.\n- Include all required ARIA attributes for elements with ARIA roles.\n- Make sure ARIA properties are valid for the element's supported roles.\n- Always include a `type` attribute for button elements.\n- Make elements with interactive roles and handlers focusable.\n- Give heading elements content that's accessible to screen readers (not hidden with `aria-hidden`).\n- Always include a `lang` attribute on the html element.\n- Always include a `title` attribute for iframe elements.\n- Accompany `onClick` with at least one of: `onKeyUp`, `onKeyDown`, or `onKeyPress`.\n- Accompany `onMouseOver`/`onMouseOut` with `onFocus`/`onBlur`.\n- Include caption tracks for audio and video elements.\n- Use semantic elements instead of role attributes in JSX.\n- Make sure all anchors are valid and navigable.\n- Ensure all ARIA properties (`aria-*`) are valid.\n- Use valid, non-abstract ARIA roles for elements with ARIA roles.\n- Use valid ARIA state and property values.\n- Use valid values for the `autocomplete` attribute on input elements.\n- Use correct ISO language/country codes for the `lang` attribute.\n\n### Code Complexity and Quality\n- Don't use consecutive spaces in regular expression literals.\n- Don't use the `arguments` object.\n- Don't use primitive type aliases or misleading types.\n- Don't use the comma operator.\n- Don't use empty type parameters in type aliases and interfaces.\n- Don't write functions that exceed a given Cognitive Complexity score.\n- Don't nest describe() blocks too deeply in test files.\n- Don't use unnecessary boolean casts.\n- Don't use unnecessary callbacks with flatMap.\n- Use for...of statements instead of Array.forEach.\n- Don't create classes that only have static members (like a static namespace).\n- Don't use this and super in static contexts.\n- Don't use unnecessary catch clauses.\n- Don't use unnecessary constructors.\n- Don't use unnecessary continue statements.\n- Don't export empty modules that don't change anything.\n- Don't use unnecessary escape sequences in regular expression literals.\n- Don't use unnecessary fragments.\n- Don't use unnecessary labels.\n- Don't use unnecessary nested block statements.\n- Don't rename imports, exports, and destructured assignments to the same name.\n- Don't use unnecessary string or template literal concatenation.\n- Don't use String.raw in template literals when there are no escape sequences.\n- Don't use useless case statements in switch statements.\n- Don't use ternary operators when simpler alternatives exist.\n- Don't use useless `this` aliasing.\n- Don't use any or unknown as type constraints.\n- Don't initialize variables to undefined.\n- Don't use the void operators (they're not familiar).\n- Use arrow functions instead of function expressions.\n- Use Date.now() to get milliseconds since the Unix Epoch.\n- Use .flatMap() instead of map().flat() when possible.\n- Use literal property access instead of computed property access.\n- Don't use parseInt() or Number.parseInt() when binary, octal, or hexadecimal literals work.\n- Use concise optional chaining instead of chained logical expressions.\n- Use regular expression literals instead of the RegExp constructor when possible.\n- Don't use number literal object member names that aren't base 10 or use underscore separators.\n- Remove redundant terms from logical expressions.\n- Use while loops instead of for loops when you don't need initializer and update expressions.\n- Don't pass children as props.\n- Don't reassign const variables.\n- Don't use constant expressions in conditions.\n- Don't use `Math.min` and `Math.max` to clamp values when the result is constant.\n- Don't return a value from a constructor.\n- Don't use empty character classes in regular expression literals.\n- Don't use empty destructuring patterns.\n- Don't call global object properties as functions.\n- Don't declare functions and vars that are accessible outside their block.\n- Make sure builtins are correctly instantiated.\n- Don't use super() incorrectly inside classes. Also check that super() is called in classes that extend other constructors.\n- Don't use variables and function parameters before they're declared.\n- Don't use 8 and 9 escape sequences in string literals.\n- Don't use literal numbers that lose precision.\n\n### React and JSX Best Practices\n- Don't use the return value of React.render.\n- Make sure all dependencies are correctly specified in React hooks.\n- Make sure all React hooks are called from the top level of component functions.\n- Don't forget key props in iterators and collection literals.\n- Don't destructure props inside JSX components in Solid projects.\n- Don't define React components inside other components.\n- Don't use event handlers on non-interactive elements.\n- Don't assign to React component props.\n- Don't use both `children` and `dangerouslySetInnerHTML` props on the same element.\n- Don't use dangerous JSX props.\n- Don't use Array index in keys.\n- Don't insert comments as text nodes.\n- Don't assign JSX properties multiple times.\n- Don't add extra closing tags for components without children.\n- Use `<>...` instead of `...`.\n- Watch out for possible \"wrong\" semicolons inside JSX elements.\n\n### Correctness and Safety\n- Don't assign a value to itself.\n- Don't return a value from a setter.\n- Don't compare expressions that modify string case with non-compliant values.\n- Don't use lexical declarations in switch clauses.\n- Don't use variables that haven't been declared in the document.\n- Don't write unreachable code.\n- Make sure super() is called exactly once on every code path in a class constructor before this is accessed if the class has a superclass.\n- Don't use control flow statements in finally blocks.\n- Don't use optional chaining where undefined values aren't allowed.\n- Don't have unused function parameters.\n- Don't have unused imports.\n- Don't have unused labels.\n- Don't have unused private class members.\n- Don't have unused variables.\n- Make sure void (self-closing) elements don't have children.\n- Don't return a value from a function with the return type 'void'\n- Use isNaN() when checking for NaN.\n- Make sure \"for\" loop update clauses move the counter in the right direction.\n- Make sure typeof expressions are compared to valid values.\n- Make sure generator functions contain yield.\n- Don't use await inside loops.\n- Don't use bitwise operators.\n- Don't use expressions where the operation doesn't change the value.\n- Make sure Promise-like statements are handled appropriately.\n- Don't use __dirname and __filename in the global scope.\n- Prevent import cycles.\n- Don't use configured elements.\n- Don't hardcode sensitive data like API keys and tokens.\n- Don't let variable declarations shadow variables from outer scopes.\n- Don't use the TypeScript directive @ts-ignore.\n- Prevent duplicate polyfills from Polyfill.io.\n- Don't use useless backreferences in regular expressions that always match empty strings.\n- Don't use unnecessary escapes in string literals.\n- Don't use useless undefined.\n- Make sure getters and setters for the same property are next to each other in class and object definitions.\n- Make sure object literals are declared consistently (defaults to explicit definitions).\n- Use static Response methods instead of new Response() constructor when possible.\n- Make sure switch-case statements are exhaustive.\n- Make sure the `preconnect` attribute is used when using Google Fonts.\n- Use `Array#{indexOf,lastIndexOf}()` instead of `Array#{findIndex,findLastIndex}()` when looking for the index of an item.\n- Make sure iterable callbacks return consistent values.\n- Use `with { type: \"json\" }` for JSON module imports.\n- Use numeric separators in numeric literals.\n- Use object spread instead of `Object.assign()` when constructing new objects.\n- Always use the radix argument when using `parseInt()`.\n- Make sure JSDoc comment lines start with a single asterisk, except for the first one.\n- Include a description parameter for `Symbol()`.\n- Don't use spread (`...`) syntax on accumulators.\n- Don't use the `delete` operator.\n- Don't access namespace imports dynamically.\n- Don't use namespace imports.\n- Declare regex literals at the top level.\n- Don't use `target=\"_blank\"` without `rel=\"noopener\"`.\n\n### TypeScript Best Practices\n- Don't use TypeScript enums.\n- Don't export imported variables.\n- Don't add type annotations to variables, parameters, and class properties that are initialized with literal expressions.\n- Don't use TypeScript namespaces.\n- Don't use non-null assertions with the `!` postfix operator.\n- Don't use parameter properties in class constructors.\n- Don't use user-defined types.\n- Use `as const` instead of literal types and type annotations.\n- Use either `T[]` or `Array` consistently.\n- Initialize each enum member value explicitly.\n- Use `export type` for types.\n- Use `import type` for types.\n- Make sure all enum members are literal values.\n- Don't use TypeScript const enum.\n- Don't declare empty interfaces.\n- Don't let variables evolve into any type through reassignments.\n- Don't use the any type.\n- Don't misuse the non-null assertion operator (!) in TypeScript files.\n- Don't use implicit any type on variable declarations.\n- Don't merge interfaces and classes unsafely.\n- Don't use overload signatures that aren't next to each other.\n- Use the namespace keyword instead of the module keyword to declare TypeScript namespaces.\n\n### Style and Consistency\n- Don't use global `eval()`.\n- Don't use callbacks in asynchronous tests and hooks.\n- Don't use negation in `if` statements that have `else` clauses.\n- Don't use nested ternary expressions.\n- Don't reassign function parameters.\n- This rule lets you specify global variable names you don't want to use in your application.\n- Don't use specified modules when loaded by import or require.\n- Don't use constants whose value is the upper-case version of their name.\n- Use `String.slice()` instead of `String.substr()` and `String.substring()`.\n- Don't use template literals if you don't need interpolation or special-character handling.\n- Don't use `else` blocks when the `if` block breaks early.\n- Don't use yoda expressions.\n- Don't use Array constructors.\n- Use `at()` instead of integer index access.\n- Follow curly brace conventions.\n- Use `else if` instead of nested `if` statements in `else` clauses.\n- Use single `if` statements instead of nested `if` clauses.\n- Use `new` for all builtins except `String`, `Number`, and `Boolean`.\n- Use consistent accessibility modifiers on class properties and methods.\n- Use `const` declarations for variables that are only assigned once.\n- Put default function parameters and optional function parameters last.\n- Include a `default` clause in switch statements.\n- Use the `**` operator instead of `Math.pow`.\n- Use `for-of` loops when you need the index to extract an item from the iterated array.\n- Use `node:assert/strict` over `node:assert`.\n- Use the `node:` protocol for Node.js builtin modules.\n- Use Number properties instead of global ones.\n- Use assignment operator shorthand where possible.\n- Use function types instead of object types with call signatures.\n- Use template literals over string concatenation.\n- Use `new` when throwing an error.\n- Don't throw non-Error values.\n- Use `String.trimStart()` and `String.trimEnd()` over `String.trimLeft()` and `String.trimRight()`.\n- Use standard constants instead of approximated literals.\n- Don't assign values in expressions.\n- Don't use async functions as Promise executors.\n- Don't reassign exceptions in catch clauses.\n- Don't reassign class members.\n- Don't compare against -0.\n- Don't use labeled statements that aren't loops.\n- Don't use void type outside of generic or return types.\n- Don't use console.\n- Don't use control characters and escape sequences that match control characters in regular expression literals.\n- Don't use debugger.\n- Don't assign directly to document.cookie.\n- Use `===` and `!==`.\n- Don't use duplicate case labels.\n- Don't use duplicate class members.\n- Don't use duplicate conditions in if-else-if chains.\n- Don't use two keys with the same name inside objects.\n- Don't use duplicate function parameter names.\n- Don't have duplicate hooks in describe blocks.\n- Don't use empty block statements and static blocks.\n- Don't let switch clauses fall through.\n- Don't reassign function declarations.\n- Don't allow assignments to native objects and read-only global variables.\n- Use Number.isFinite instead of global isFinite.\n- Use Number.isNaN instead of global isNaN.\n- Don't assign to imported bindings.\n- Don't use irregular whitespace characters.\n- Don't use labels that share a name with a variable.\n- Don't use characters made with multiple code points in character class syntax.\n- Make sure to use new and constructor properly.\n- Don't use shorthand assign when the variable appears on both sides.\n- Don't use octal escape sequences in string literals.\n- Don't use Object.prototype builtins directly.\n- Don't redeclare variables, functions, classes, and types in the same scope.\n- Don't have redundant \"use strict\".\n- Don't compare things where both sides are exactly the same.\n- Don't let identifiers shadow restricted names.\n- Don't use sparse arrays (arrays with holes).\n- Don't use template literal placeholder syntax in regular strings.\n- Don't use the then property.\n- Don't use unsafe negation.\n- Don't use var.\n- Don't use with statements in non-strict contexts.\n- Make sure async functions actually use await.\n- Make sure default clauses in switch statements come last.\n- Make sure to pass a message value when creating a built-in error.\n- Make sure get methods always return a value.\n- Use a recommended display strategy with Google Fonts.\n- Make sure for-in loops include an if statement.\n- Use Array.isArray() instead of instanceof Array.\n- Make sure to use the digits argument with Number#toFixed().\n- Make sure to use the \"use strict\" directive in script files.\n\n### Next.js Specific Rules\n- Don't use `` elements in Next.js projects.\n- Don't use `` elements in Next.js projects.\n- Don't import next/document outside of pages/_document.jsx in Next.js projects.\n- Don't use the next/head module in pages/_document.js on Next.js projects.\n\n### Testing Best Practices\n- Don't use export or module.exports in test files.\n- Don't use focused tests.\n- Make sure the assertion function, like expect, is placed inside an it() function call.\n- Don't use disabled tests.\n\n## Common Tasks\n- `npx ultracite init` - Initialize Ultracite in your project\n- `npx ultracite fix` - Format and fix code automatically\n- `npx ultracite check` - Check for issues without fixing\n\n## Example: Error Handling\n```typescript\n// ✅ Good: Comprehensive error handling\ntry {\n const result = await fetchData();\n return { success: true, data: result };\n} catch (error) {\n console.error('API call failed:', error);\n return { success: false, error: error.message };\n}\n\n// ❌ Bad: Swallowing errors\ntry {\n return await fetchData();\n} catch (e) {\n console.log(e);\n}\n```"},"items":[{"name":"AGENTS.md","path":"AGENTS.md","rawUrl":"https://raw.githubusercontent.com/magicuidesign/magicui/HEAD/AGENTS.md","title":"AI Agent Protocol & Instructions","category":"root-instruction","format":"markdown","content":"# Project Context\nUltracite enforces strict type safety, accessibility standards, and consistent code quality for JavaScript/TypeScript projects using Biome's lightning-fast formatter and linter.\n\n## Key Principles\n- Zero configuration required\n- Subsecond performance\n- Maximum type safety\n- AI-friendly code generation\n\n## Before Writing Code\n1. Analyze existing patterns in the codebase\n2. Consider edge cases and error scenarios\n3. Follow the rules below strictly\n4. Validate accessibility requirements\n\n## Rules\n\n### Accessibility (a11y)\n- Don't use `accessKey` attribute on any HTML element.\n- Don't set `aria-hidden=\"true\"` on focusable elements.\n- Don't add ARIA roles, states, and properties to elements that don't support them.\n- Don't use distracting elements like `` or ``.\n- Only use the `scope` prop on `` elements.\n- Don't assign non-interactive ARIA roles to interactive HTML elements.\n- Make sure label elements have text content and are associated with an input.\n- Don't assign interactive ARIA roles to non-interactive HTML elements.\n- Don't assign `tabIndex` to non-interactive HTML elements.\n- Don't use positive integers for `tabIndex` property.\n- Don't include \"image\", \"picture\", or \"photo\" in img alt prop.\n- Don't use explicit role property that's the same as the implicit/default role.\n- Make static elements with click handlers use a valid role attribute.\n- Always include a `title` element for SVG elements.\n- Give all elements requiring alt text meaningful information for screen readers.\n- Make sure anchors have content that's accessible to screen readers.\n- Assign `tabIndex` to non-interactive HTML elements with `aria-activedescendant`.\n- Include all required ARIA attributes for elements with ARIA roles.\n- Make sure ARIA properties are valid for the element's supported roles.\n- Always include a `type` attribute for button elements.\n- Make elements with interactive roles and handlers focusable.\n- Give heading elements content that's accessible to screen readers (not hidden with `aria-hidden`).\n- Always include a `lang` attribute on the html element.\n- Always include a `title` attribute for iframe elements.\n- Accompany `onClick` with at least one of: `onKeyUp`, `onKeyDown`, or `onKeyPress`.\n- Accompany `onMouseOver`/`onMouseOut` with `onFocus`/`onBlur`.\n- Include caption tracks for audio and video elements.\n- Use semantic elements instead of role attributes in JSX.\n- Make sure all anchors are valid and navigable.\n- Ensure all ARIA properties (`aria-*`) are valid.\n- Use valid, non-abstract ARIA roles for elements with ARIA roles.\n- Use valid ARIA state and property values.\n- Use valid values for the `autocomplete` attribute on input elements.\n- Use correct ISO language/country codes for the `lang` attribute.\n\n### Code Complexity and Quality\n- Don't use consecutive spaces in regular expression literals.\n- Don't use the `arguments` object.\n- Don't use primitive type aliases or misleading types.\n- Don't use the comma operator.\n- Don't use empty type parameters in type aliases and interfaces.\n- Don't write functions that exceed a given Cognitive Complexity score.\n- Don't nest describe() blocks too deeply in test files.\n- Don't use unnecessary boolean casts.\n- Don't use unnecessary callbacks with flatMap.\n- Use for...of statements instead of Array.forEach.\n- Don't create classes that only have static members (like a static namespace).\n- Don't use this and super in static contexts.\n- Don't use unnecessary catch clauses.\n- Don't use unnecessary constructors.\n- Don't use unnecessary continue statements.\n- Don't export empty modules that don't change anything.\n- Don't use unnecessary escape sequences in regular expression literals.\n- Don't use unnecessary fragments.\n- Don't use unnecessary labels.\n- Don't use unnecessary nested block statements.\n- Don't rename imports, exports, and destructured assignments to the same name.\n- Don't use unnecessary string or template literal concatenation.\n- Don't use String.raw in template literals when there are no escape sequences.\n- Don't use useless case statements in switch statements.\n- Don't use ternary operators when simpler alternatives exist.\n- Don't use useless `this` aliasing.\n- Don't use any or unknown as type constraints.\n- Don't initialize variables to undefined.\n- Don't use the void operators (they're not familiar).\n- Use arrow functions instead of function expressions.\n- Use Date.now() to get milliseconds since the Unix Epoch.\n- Use .flatMap() instead of map().flat() when possible.\n- Use literal property access instead of computed property access.\n- Don't use parseInt() or Number.parseInt() when binary, octal, or hexadecimal literals work.\n- Use concise optional chaining instead of chained logical expressions.\n- Use regular expression literals instead of the RegExp constructor when possible.\n- Don't use number literal object member names that aren't base 10 or use underscore separators.\n- Remove redundant terms from logical expressions.\n- Use while loops instead of for loops when you don't need initializer and update expressions.\n- Don't pass children as props.\n- Don't reassign const variables.\n- Don't use constant expressions in conditions.\n- Don't use `Math.min` and `Math.max` to clamp values when the result is constant.\n- Don't return a value from a constructor.\n- Don't use empty character classes in regular expression literals.\n- Don't use empty destructuring patterns.\n- Don't call global object properties as functions.\n- Don't declare functions and vars that are accessible outside their block.\n- Make sure builtins are correctly instantiated.\n- Don't use super() incorrectly inside classes. Also check that super() is called in classes that extend other constructors.\n- Don't use variables and function parameters before they're declared.\n- Don't use 8 and 9 escape sequences in string literals.\n- Don't use literal numbers that lose precision.\n\n### React and JSX Best Practices\n- Don't use the return value of React.render.\n- Make sure all dependencies are correctly specified in React hooks.\n- Make sure all React hooks are called from the top level of component functions.\n- Don't forget key props in iterators and collection literals.\n- Don't destructure props inside JSX components in Solid projects.\n- Don't define React components inside other components.\n- Don't use event handlers on non-interactive elements.\n- Don't assign to React component props.\n- Don't use both `children` and `dangerouslySetInnerHTML` props on the same element.\n- Don't use dangerous JSX props.\n- Don't use Array index in keys.\n- Don't insert comments as text nodes.\n- Don't assign JSX properties multiple times.\n- Don't add extra closing tags for components without children.\n- Use `<>...` instead of `...`.\n- Watch out for possible \"wrong\" semicolons inside JSX elements.\n\n### Correctness and Safety\n- Don't assign a value to itself.\n- Don't return a value from a setter.\n- Don't compare expressions that modify string case with non-compliant values.\n- Don't use lexical declarations in switch clauses.\n- Don't use variables that haven't been declared in the document.\n- Don't write unreachable code.\n- Make sure super() is called exactly once on every code path in a class constructor before this is accessed if the class has a superclass.\n- Don't use control flow statements in finally blocks.\n- Don't use optional chaining where undefined values aren't allowed.\n- Don't have unused function parameters.\n- Don't have unused imports.\n- Don't have unused labels.\n- Don't have unused private class members.\n- Don't have unused variables.\n- Make sure void (self-closing) elements don't have children.\n- Don't return a value from a function with the return type 'void'\n- Use isNaN() when checking for NaN.\n- Make sure \"for\" loop update clauses move the counter in the right direction.\n- Make sure typeof expressions are compared to valid values.\n- Make sure generator functions contain yield.\n- Don't use await inside loops.\n- Don't use bitwise operators.\n- Don't use expressions where the operation doesn't change the value.\n- Make sure Promise-like statements are handled appropriately.\n- Don't use __dirname and __filename in the global scope.\n- Prevent import cycles.\n- Don't use configured elements.\n- Don't hardcode sensitive data like API keys and tokens.\n- Don't let variable declarations shadow variables from outer scopes.\n- Don't use the TypeScript directive @ts-ignore.\n- Prevent duplicate polyfills from Polyfill.io.\n- Don't use useless backreferences in regular expressions that always match empty strings.\n- Don't use unnecessary escapes in string literals.\n- Don't use useless undefined.\n- Make sure getters and setters for the same property are next to each other in class and object definitions.\n- Make sure object literals are declared consistently (defaults to explicit definitions).\n- Use static Response methods instead of new Response() constructor when possible.\n- Make sure switch-case statements are exhaustive.\n- Make sure the `preconnect` attribute is used when using Google Fonts.\n- Use `Array#{indexOf,lastIndexOf}()` instead of `Array#{findIndex,findLastIndex}()` when looking for the index of an item.\n- Make sure iterable callbacks return consistent values.\n- Use `with { type: \"json\" }` for JSON module imports.\n- Use numeric separators in numeric literals.\n- Use object spread instead of `Object.assign()` when constructing new objects.\n- Always use the radix argument when using `parseInt()`.\n- Make sure JSDoc comment lines start with a single asterisk, except for the first one.\n- Include a description parameter for `Symbol()`.\n- Don't use spread (`...`) syntax on accumulators.\n- Don't use the `delete` operator.\n- Don't access namespace imports dynamically.\n- Don't use namespace imports.\n- Declare regex literals at the top level.\n- Don't use `target=\"_blank\"` without `rel=\"noopener\"`.\n\n### TypeScript Best Practices\n- Don't use TypeScript enums.\n- Don't export imported variables.\n- Don't add type annotations to variables, parameters, and class properties that are initialized with literal expressions.\n- Don't use TypeScript namespaces.\n- Don't use non-null assertions with the `!` postfix operator.\n- Don't use parameter properties in class constructors.\n- Don't use user-defined types.\n- Use `as const` instead of literal types and type annotations.\n- Use either `T[]` or `Array` consistently.\n- Initialize each enum member value explicitly.\n- Use `export type` for types.\n- Use `import type` for types.\n- Make sure all enum members are literal values.\n- Don't use TypeScript const enum.\n- Don't declare empty interfaces.\n- Don't let variables evolve into any type through reassignments.\n- Don't use the any type.\n- Don't misuse the non-null assertion operator (!) in TypeScript files.\n- Don't use implicit any type on variable declarations.\n- Don't merge interfaces and classes unsafely.\n- Don't use overload signatures that aren't next to each other.\n- Use the namespace keyword instead of the module keyword to declare TypeScript namespaces.\n\n### Style and Consistency\n- Don't use global `eval()`.\n- Don't use callbacks in asynchronous tests and hooks.\n- Don't use negation in `if` statements that have `else` clauses.\n- Don't use nested ternary expressions.\n- Don't reassign function parameters.\n- This rule lets you specify global variable names you don't want to use in your application.\n- Don't use specified modules when loaded by import or require.\n- Don't use constants whose value is the upper-case version of their name.\n- Use `String.slice()` instead of `String.substr()` and `String.substring()`.\n- Don't use template literals if you don't need interpolation or special-character handling.\n- Don't use `else` blocks when the `if` block breaks early.\n- Don't use yoda expressions.\n- Don't use Array constructors.\n- Use `at()` instead of integer index access.\n- Follow curly brace conventions.\n- Use `else if` instead of nested `if` statements in `else` clauses.\n- Use single `if` statements instead of nested `if` clauses.\n- Use `new` for all builtins except `String`, `Number`, and `Boolean`.\n- Use consistent accessibility modifiers on class properties and methods.\n- Use `const` declarations for variables that are only assigned once.\n- Put default function parameters and optional function parameters last.\n- Include a `default` clause in switch statements.\n- Use the `**` operator instead of `Math.pow`.\n- Use `for-of` loops when you need the index to extract an item from the iterated array.\n- Use `node:assert/strict` over `node:assert`.\n- Use the `node:` protocol for Node.js builtin modules.\n- Use Number properties instead of global ones.\n- Use assignment operator shorthand where possible.\n- Use function types instead of object types with call signatures.\n- Use template literals over string concatenation.\n- Use `new` when throwing an error.\n- Don't throw non-Error values.\n- Use `String.trimStart()` and `String.trimEnd()` over `String.trimLeft()` and `String.trimRight()`.\n- Use standard constants instead of approximated literals.\n- Don't assign values in expressions.\n- Don't use async functions as Promise executors.\n- Don't reassign exceptions in catch clauses.\n- Don't reassign class members.\n- Don't compare against -0.\n- Don't use labeled statements that aren't loops.\n- Don't use void type outside of generic or return types.\n- Don't use console.\n- Don't use control characters and escape sequences that match control characters in regular expression literals.\n- Don't use debugger.\n- Don't assign directly to document.cookie.\n- Use `===` and `!==`.\n- Don't use duplicate case labels.\n- Don't use duplicate class members.\n- Don't use duplicate conditions in if-else-if chains.\n- Don't use two keys with the same name inside objects.\n- Don't use duplicate function parameter names.\n- Don't have duplicate hooks in describe blocks.\n- Don't use empty block statements and static blocks.\n- Don't let switch clauses fall through.\n- Don't reassign function declarations.\n- Don't allow assignments to native objects and read-only global variables.\n- Use Number.isFinite instead of global isFinite.\n- Use Number.isNaN instead of global isNaN.\n- Don't assign to imported bindings.\n- Don't use irregular whitespace characters.\n- Don't use labels that share a name with a variable.\n- Don't use characters made with multiple code points in character class syntax.\n- Make sure to use new and constructor properly.\n- Don't use shorthand assign when the variable appears on both sides.\n- Don't use octal escape sequences in string literals.\n- Don't use Object.prototype builtins directly.\n- Don't redeclare variables, functions, classes, and types in the same scope.\n- Don't have redundant \"use strict\".\n- Don't compare things where both sides are exactly the same.\n- Don't let identifiers shadow restricted names.\n- Don't use sparse arrays (arrays with holes).\n- Don't use template literal placeholder syntax in regular strings.\n- Don't use the then property.\n- Don't use unsafe negation.\n- Don't use var.\n- Don't use with statements in non-strict contexts.\n- Make sure async functions actually use await.\n- Make sure default clauses in switch statements come last.\n- Make sure to pass a message value when creating a built-in error.\n- Make sure get methods always return a value.\n- Use a recommended display strategy with Google Fonts.\n- Make sure for-in loops include an if statement.\n- Use Array.isArray() instead of instanceof Array.\n- Make sure to use the digits argument with Number#toFixed().\n- Make sure to use the \"use strict\" directive in script files.\n\n### Next.js Specific Rules\n- Don't use `` elements in Next.js projects.\n- Don't use `` elements in Next.js projects.\n- Don't import next/document outside of pages/_document.jsx in Next.js projects.\n- Don't use the next/head module in pages/_document.js on Next.js projects.\n\n### Testing Best Practices\n- Don't use export or module.exports in test files.\n- Don't use focused tests.\n- Make sure the assertion function, like expect, is placed inside an it() function call.\n- Don't use disabled tests.\n\n## Common Tasks\n- `npx ultracite init` - Initialize Ultracite in your project\n- `npx ultracite fix` - Format and fix code automatically\n- `npx ultracite check` - Check for issues without fixing\n\n## Example: Error Handling\n```typescript\n// ✅ Good: Comprehensive error handling\ntry {\n const result = await fetchData();\n return { success: true, data: result };\n} catch (error) {\n console.error('API call failed:', error);\n return { success: false, error: error.message };\n}\n\n// ❌ Bad: Swallowing errors\ntry {\n return await fetchData();\n} catch (e) {\n console.log(e);\n}\n```","isInternal":false,"tokens":3599,"sizeBytes":16706},{"name":"components.md","path":"skills/magic-ui/references/components.md","rawUrl":"https://raw.githubusercontent.com/magicuidesign/magicui/HEAD/skills/magic-ui/references/components.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Magic UI Component Reference\n\n## Purpose\n\nUse this document to choose the right Magic UI component and avoid integration mistakes before implementation.\n\n## Install Contract\n\n- Initialize shadcn once per project:\n```bash\nnpx shadcn@latest init\n```\n- Add components via registry:\n```bash\nnpx shadcn@latest add @magicui/\n```\n- Default import path is usually:\n```tsx\nimport { ComponentName } from \"@/components/ui/\"\n```\n\nIf the project does not use `@/` aliases, adapt import paths to local conventions.\n\n## Families\n\n### Layout And Social Proof\n\n- `marquee`\n- `avatar-circles`\n- `bento-grid`\n\nUse for logo rails, testimonial movement, and feature grids.\n\n### Hero And Visual Anchors\n\n- `globe`\n- `warp-background`\n- `animated-grid-pattern`\n- `retro-grid`\n\nUse one primary visual anchor per hero to keep hierarchy clear.\n\n### Text Motion\n\n- `blur-fade`\n- `text-animate`\n- `word-rotate`\n- `sparkles-text`\n- `typing-animation`\n\nUse when product messaging needs motion emphasis.\n\n### Buttons And CTA Emphasis\n\n- `shiny-button`\n- `shimmer-button`\n- `rainbow-button`\n- `ripple-button`\n\nKeep CTA style consistent within one page section.\n\n### Ambient Effects\n\n- `particles`\n- `flickering-grid`\n- `dot-pattern`\n- `grid-pattern`\n- `light-rays`\n\nUse these as supporting layers, not primary content.\n\n## Integration Notes\n\n- Some components require additional dependencies (for example `cobe`, `motion` for `globe` patterns).\n- Some components require global CSS keyframes (for example `marquee` variants).\n- Prefer prop-level customization before editing generated source.\n- If customization grows large, wrap the component in a local section component rather than editing registry output directly.\n\n## Quality Checks\n\n- Accessibility: interactive controls remain keyboard-accessible.\n- Readability: animated backgrounds do not reduce text contrast.\n- Responsiveness: no horizontal overflow on small screens.\n- Performance: avoid stacking multiple expensive animated backgrounds in one viewport.\n","isInternal":false,"tokens":452,"sizeBytes":2018},{"name":"recipes.md","path":"skills/magic-ui/references/recipes.md","rawUrl":"https://raw.githubusercontent.com/magicuidesign/magicui/HEAD/skills/magic-ui/references/recipes.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Magic UI Recipes\n\n## Purpose\n\nUse these recipes when the user asks for concrete UI sections rather than a single component.\n\n## Recipe 1: Hero With Visual Depth\n\n### Goal\n\nCreate a hero section with strong visual identity and clear CTA hierarchy.\n\n### Suggested Stack\n\n- Primary visual: `warp-background` or `animated-grid-pattern`\n- Heading entrance: `blur-fade`\n- CTA: `shiny-button`\n\n### Steps\n\n1. Install components:\n```bash\nnpx shadcn@latest add @magicui/warp-background @magicui/blur-fade @magicui/shiny-button\n```\n2. Wrap hero content in the background component.\n3. Animate heading and subheading with subtle stagger.\n4. Keep one primary CTA and one secondary action.\n\n### Guardrails\n\n- Keep animations under control: avoid combining more than two high-motion effects in hero.\n- Preserve text contrast over animated backgrounds.\n\n## Recipe 2: Testimonial And Logo Trust Rail\n\n### Goal\n\nShow social proof without static blocks.\n\n### Suggested Stack\n\n- `marquee`\n- `avatar-circles` (optional for compact profile clusters)\n\n### Steps\n\n1. Install:\n```bash\nnpx shadcn@latest add @magicui/marquee @magicui/avatar-circles\n```\n2. Use horizontal marquee for desktop and reduced density on mobile.\n3. If using avatar clusters, add concise labels and accessible alt text.\n\n### Guardrails\n\n- Ensure auto-scrolling content can pause on hover/focus for usability.\n- Do not overload with long testimonial paragraphs in moving rails.\n\n## Recipe 3: Feature Grid With Motion Highlights\n\n### Goal\n\nPresent product capabilities in an interactive but readable grid.\n\n### Suggested Stack\n\n- `bento-grid`\n- One text motion component per card group (`text-animate` or `word-rotate`)\n\n### Steps\n\n1. Install:\n```bash\nnpx shadcn@latest add @magicui/bento-grid @magicui/text-animate\n```\n2. Keep card copy short and scannable.\n3. Use motion for emphasis on only 1-2 cards.\n\n### Guardrails\n\n- Maintain consistent card heights where possible.\n- Avoid running simultaneous animations in every card.\n\n## Final Validation Checklist\n\n- Layout works at mobile and desktop breakpoints.\n- Interactive elements are reachable with keyboard navigation.\n- Motion supports content hierarchy instead of competing with it.\n- Added components compile with the current path alias setup.\n","isInternal":false,"tokens":510,"sizeBytes":2250},{"name":"SKILL.md","path":"skills/magic-ui/SKILL.md","rawUrl":"https://raw.githubusercontent.com/magicuidesign/magicui/HEAD/skills/magic-ui/SKILL.md","title":"magic-ui","category":"anthropic-skill","format":"markdown","content":"---\nname: magic-ui\ndescription: Use this skill when users want to add, customize, or troubleshoot Magic UI components in React/Next.js projects. It covers component selection, shadcn registry installation (`@magicui/*`), integration patterns, and practical quality checks for accessibility and maintainability.\nmetadata:\n short-description: Build and customize UIs with Magic UI components\n---\n\n# Magic UI\n\nUse this skill when the task involves Magic UI components, animated UI sections, or converting static sections into interactive UI using the Magic UI registry.\n\n## When To Apply\n\nApply this skill when users ask to:\n\n- Add a Magic UI component (for example: marquee, globe, blur-fade, shiny-button)\n- Build a section with Magic UI effects (hero, testimonials, CTA, feature grid)\n- Replace custom animation code with Magic UI components\n- Troubleshoot installation/import issues for `@magicui/*`\n\n## Core Workflow\n\n1. Define the UI outcome first.\n - Identify section type, tone, motion intensity, and responsive behavior.\n - Keep motion intentional; avoid stacking many high-motion effects in one viewport.\n\n2. Confirm project prerequisites.\n - Project should be React/Next.js with Tailwind CSS.\n - shadcn must be initialized before adding registry components:\n```bash\nnpx shadcn@latest init\n```\n\n3. Install the selected component(s).\n```bash\nnpx shadcn@latest add @magicui/\n```\nExample:\n```bash\nnpx shadcn@latest add @magicui/magic-card\n```\n\n4. Integrate into the target section.\n - Import from the generated path (typically `@/components/ui/`).\n - Keep component APIs intact; prefer prop/className customization over rewriting internals.\n - If docs mention extra dependencies or CSS keyframes, add them during integration.\n\n5. Validate quality before finishing.\n - Accessibility: semantic HTML, keyboard access, meaningful labels/text.\n - Responsiveness: check mobile layout and overflow behavior.\n - Performance: avoid unnecessary client-only wrappers and heavy animation stacking.\n - Maintainability: keep new code modular and consistent with existing project conventions.\n\n## References To Load On Demand\n\n- For component choice, install shape, and dependency expectations:\n - Read `references/components.md`\n- For section-level implementation patterns:\n - Read `references/recipes.md`\n\n## Quick Component Selection Heuristics\n\n- Social proof/logo rails: `marquee`, `avatar-circles`\n- Hero visual impact: `globe`, `warp-background`, `animated-grid-pattern`\n- Text animation: `blur-fade`, `text-animate`, `word-rotate`, `sparkles-text`\n- CTA emphasis: `shiny-button`, `shimmer-button`, `rainbow-button`\n- Ambient backgrounds: `grid-pattern`, `dot-pattern`, `particles`, `flickering-grid`\n\nStart with 1 core component + 1 supporting effect, then expand only if needed.\n\n## Troubleshooting\n\n- `components.json` or registry init error:\n - Run `npx shadcn@latest init` in the project root.\n- Import path mismatch (`@/` alias not configured):\n - Use the project's alias style or relative imports.\n- Visual mismatch after install:\n - Check for required global CSS/keyframes listed in the component docs.\n- Missing package errors:\n - Install dependencies listed in the component's manual installation steps.\n\n## Reference Links\n\n- Magic UI docs: `https://magicui.design/docs`\n- Component docs: `https://magicui.design/docs/components`\n- Installation: `https://magicui.design/docs/installation`\n- MCP setup (optional, for AI IDE workflows): `https://magicui.design/docs/mcp`\n","frontmatter":{"name":"magic-ui","description":"Use this skill when users want to add, customize, or troubleshoot Magic UI components in React/Next.js projects. It covers component selection, shadcn registry installation (`@magicui/*`), integration patterns, and practical quality checks for accessibility and maintainability.","metadata":{"short-description":"Build and customize UIs with Magic UI components"}},"isInternal":false,"tokens":782,"sizeBytes":3526},{"name":"mcp.json","path":".cursor/mcp.json","rawUrl":"https://raw.githubusercontent.com/magicuidesign/magicui/HEAD/.cursor/mcp.json","title":"Model Context Protocol (MCP) Configuration","category":"mcp-config","format":"json","content":"{\n \"mcpServers\": {\n \"shadcn\": {\n \"command\": \"npx\",\n \"args\": [\"shadcn@latest\", \"mcp\"]\n }\n }\n}\n","frontmatter":{"mcpServers":{"shadcn":{"command":"npx","args":["shadcn@latest","mcp"]}}},"isInternal":false,"tokens":43,"sizeBytes":111},{"name":"mcp.json","path":"apps/www/public/mcp.json","rawUrl":"https://raw.githubusercontent.com/magicuidesign/magicui/HEAD/apps/www/public/mcp.json","title":"Model Context Protocol (MCP) Configuration","category":"mcp-config","format":"json","content":"{\n \"mcpServers\": {\n \"magicuidesign-mcp\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@magicuidesign/mcp@latest\"]\n }\n }\n}\n","frontmatter":{"mcpServers":{"magicuidesign-mcp":{"command":"npx","args":["-y","@magicuidesign/mcp@latest"]}}},"isInternal":false,"tokens":47,"sizeBytes":133}],"systemPromptSnippet":"\n\n# Project Context\nUltracite enforces strict type safety, accessibility standards, and consistent code quality for JavaScript/TypeScript projects using Biome's lightning-fast formatter and linter.\n\n## Key Principles\n- Zero configuration required\n- Subsecond performance\n- Maximum type safety\n- AI-friendly code generation\n\n## Before Writing Code\n1. Analyze existing patterns in the codebase\n2. Consider edge cases and error scenarios\n3. Follow the rules below strictly\n4. Validate accessibility requirements\n\n## Rules\n\n### Accessibility (a11y)\n- Don't use `accessKey` attribute on any HTML element.\n- Don't set `aria-hidden=\"true\"` on focusable elements.\n- Don't add ARIA roles, states, and properties to elements that don't support them.\n- Don't use distracting elements like `` or ``.\n- Only use the `scope` prop on `` elements.\n- Don't assign non-interactive ARIA roles to interactive HTML elements.\n- Make sure label elements have text content and are associated with an input.\n- Don't assign interactive ARIA roles to non-interactive HTML elements.\n- Don't assign `tabIndex` to non-interactive HTML elements.\n- Don't use positive integers for `tabIndex` property.\n- Don't include \"image\", \"picture\", or \"photo\" in img alt prop.\n- Don't use explicit role property that's the same as the implicit/default role.\n- Make static elements with click handlers use a valid role attribute.\n- Always include a `title` element for SVG elements.\n- Give all elements requiring alt text meaningful information for screen readers.\n- Make sure anchors have content that's accessible to screen readers.\n- Assign `tabIndex` to non-interactive HTML elements with `aria-activedescendant`.\n- Include all required ARIA attributes for elements with ARIA roles.\n- Make sure ARIA properties are valid for the element's supported roles.\n- Always include a `type` attribute for button elements.\n- Make elements with interactive roles and handlers focusable.\n- Give heading elements content that's accessible to screen readers (not hidden with `aria-hidden`).\n- Always include a `lang` attribute on the html element.\n- Always include a `title` attribute for iframe elements.\n- Accompany `onClick` with at least one of: `onKeyUp`, `onKeyDown`, or `onKeyPress`.\n- Accompany `onMouseOver`/`onMouseOut` with `onFocus`/`onBlur`.\n- Include caption tracks for audio and video elements.\n- Use semantic elements instead of role attributes in JSX.\n- Make sure all anchors are valid and navigable.\n- Ensure all ARIA properties (`aria-*`) are valid.\n- Use valid, non-abstract ARIA roles for elements with ARIA roles.\n- Use valid ARIA state and property values.\n- Use valid values for the `autocomplete` attribute on input elements.\n- Use correct ISO language/country codes for the `lang` attribute.\n\n### Code Complexity and Quality\n- Don't use consecutive spaces in regular expression literals.\n- Don't use the `arguments` object.\n- Don't use primitive type aliases or misleading types.\n- Don't use the comma operator.\n- Don't use empty type parameters in type aliases and interfaces.\n- Don't write functions that exceed a given Cognitive Complexity score.\n- Don't nest describe() blocks too deeply in test files.\n- Don't use unnecessary boolean casts.\n- Don't use unnecessary callbacks with flatMap.\n- Use for...of statements instead of Array.forEach.\n- Don't create classes that only have static members (like a static namespace).\n- Don't use this and super in static contexts.\n- Don't use unnecessary catch clauses.\n- Don't use unnecessary constructors.\n- Don't use unnecessary continue statements.\n- Don't export empty modules that don't change anything.\n- Don't use unnecessary escape sequences in regular expression literals.\n- Don't use unnecessary fragments.\n- Don't use unnecessary labels.\n- Don't use unnecessary nested block statements.\n- Don't rename imports, exports, and destructured assignments to the same name.\n- Don't use unnecessary string or template literal concatenation.\n- Don't use String.raw in template literals when there are no escape sequences.\n- Don't use useless case statements in switch statements.\n- Don't use ternary operators when simpler alternatives exist.\n- Don't use useless `this` aliasing.\n- Don't use any or unknown as type constraints.\n- Don't initialize variables to undefined.\n- Don't use the void operators (they're not familiar).\n- Use arrow functions instead of function expressions.\n- Use Date.now() to get milliseconds since the Unix Epoch.\n- Use .flatMap() instead of map().flat() when possible.\n- Use literal property access instead of computed property access.\n- Don't use parseInt() or Number.parseInt() when binary, octal, or hexadecimal literals work.\n- Use concise optional chaining instead of chained logical expressions.\n- Use regular expression literals instead of the RegExp constructor when possible.\n- Don't use number literal object member names that aren't base 10 or use underscore separators.\n- Remove redundant terms from logical expressions.\n- Use while loops instead of for loops when you don't need initializer and update expressions.\n- Don't pass children as props.\n- Don't reassign const variables.\n- Don't use constant expressions in conditions.\n- Don't use `Math.min` and `Math.max` to clamp values when the result is constant.\n- Don't return a value from a constructor.\n- Don't use empty character classes in regular expression literals.\n- Don't use empty destructuring patterns.\n- Don't call global object properties as functions.\n- Don't declare functions and vars that are accessible outside their block.\n- Make sure builtins are correctly instantiated.\n- Don't use super() incorrectly inside classes. Also check that super() is called in classes that extend other constructors.\n- Don't use variables and function parameters before they're declared.\n- Don't use 8 and 9 escape sequences in string literals.\n- Don't use literal numbers that lose precision.\n\n### React and JSX Best Practices\n- Don't use the return value of React.render.\n- Make sure all dependencies are correctly specified in React hooks.\n- Make sure all React hooks are called from the top level of component functions.\n- Don't forget key props in iterators and collection literals.\n- Don't destructure props inside JSX components in Solid projects.\n- Don't define React components inside other components.\n- Don't use event handlers on non-interactive elements.\n- Don't assign to React component props.\n- Don't use both `children` and `dangerouslySetInnerHTML` props on the same element.\n- Don't use dangerous JSX props.\n- Don't use Array index in keys.\n- Don't insert comments as text nodes.\n- Don't assign JSX properties multiple times.\n- Don't add extra closing tags for components without children.\n- Use `<>...` instead of `...`.\n- Watch out for possible \"wrong\" semicolons inside JSX elements.\n\n### Correctness and Safety\n- Don't assign a value to itself.\n- Don't return a value from a setter.\n- Don't compare expressions that modify string case with non-compliant values.\n- Don't use lexical declarations in switch clauses.\n- Don't use variables that haven't been declared in the document.\n- Don't write unreachable code.\n- Make sure super() is called exactly once on every code path in a class constructor before this is accessed if the class has a superclass.\n- Don't use control flow statements in finally blocks.\n- Don't use optional chaining where undefined values aren't allowed.\n- Don't have unused function parameters.\n- Don't have unused imports.\n- Don't have unused labels.\n- Don't have unused private class members.\n- Don't have unused variables.\n- Make sure void (self-closing) elements don't have children.\n- Don't return a value from a function with the return type 'void'\n- Use isNaN() when checking for NaN.\n- Make sure \"for\" loop update clauses move the counter in the right direction.\n- Make sure typeof expressions are compared to valid values.\n- Make sure generator functions contain yield.\n- Don't use await inside loops.\n- Don't use bitwise operators.\n- Don't use expressions where the operation doesn't change the value.\n- Make sure Promise-like statements are handled appropriately.\n- Don't use __dirname and __filename in the global scope.\n- Prevent import cycles.\n- Don't use configured elements.\n- Don't hardcode sensitive data like API keys and tokens.\n- Don't let variable declarations shadow variables from outer scopes.\n- Don't use the TypeScript directive @ts-ignore.\n- Prevent duplicate polyfills from Polyfill.io.\n- Don't use useless backreferences in regular expressions that always match empty strings.\n- Don't use unnecessary escapes in string literals.\n- Don't use useless undefined.\n- Make sure getters and setters for the same property are next to each other in class and object definitions.\n- Make sure object literals are declared consistently (defaults to explicit definitions).\n- Use static Response methods instead of new Response() constructor when possible.\n- Make sure switch-case statements are exhaustive.\n- Make sure the `preconnect` attribute is used when using Google Fonts.\n- Use `Array#{indexOf,lastIndexOf}()` instead of `Array#{findIndex,findLastIndex}()` when looking for the index of an item.\n- Make sure iterable callbacks return consistent values.\n- Use `with { type: \"json\" }` for JSON module imports.\n- Use numeric separators in numeric literals.\n- Use object spread instead of `Object.assign()` when constructing new objects.\n- Always use the radix argument when using `parseInt()`.\n- Make sure JSDoc comment lines start with a single asterisk, except for the first one.\n- Include a description parameter for `Symbol()`.\n- Don't use spread (`...`) syntax on accumulators.\n- Don't use the `delete` operator.\n- Don't access namespace imports dynamically.\n- Don't use namespace imports.\n- Declare regex literals at the top level.\n- Don't use `target=\"_blank\"` without `rel=\"noopener\"`.\n\n### TypeScript Best Practices\n- Don't use TypeScript enums.\n- Don't export imported variables.\n- Don't add type annotations to variables, parameters, and class properties that are initialized with literal expressions.\n- Don't use TypeScript namespaces.\n- Don't use non-null assertions with the `!` postfix operator.\n- Don't use parameter properties in class constructors.\n- Don't use user-defined types.\n- Use `as const` instead of literal types and type annotations.\n- Use either `T[]` or `Array` consistently.\n- Initialize each enum member value explicitly.\n- Use `export type` for types.\n- Use `import type` for types.\n- Make sure all enum members are literal values.\n- Don't use TypeScript const enum.\n- Don't declare empty interfaces.\n- Don't let variables evolve into any type through reassignments.\n- Don't use the any type.\n- Don't misuse the non-null assertion operator (!) in TypeScript files.\n- Don't use implicit any type on variable declarations.\n- Don't merge interfaces and classes unsafely.\n- Don't use overload signatures that aren't next to each other.\n- Use the namespace keyword instead of the module keyword to declare TypeScript namespaces.\n\n### Style and Consistency\n- Don't use global `eval()`.\n- Don't use callbacks in asynchronous tests and hooks.\n- Don't use negation in `if` statements that have `else` clauses.\n- Don't use nested ternary expressions.\n- Don't reassign function parameters.\n- This rule lets you specify global variable names you don't want to use in your application.\n- Don't use specified modules when loaded by import or require.\n- Don't use constants whose value is the upper-case version of their name.\n- Use `String.slice()` instead of `String.substr()` and `String.substring()`.\n- Don't use template literals if you don't need interpolation or special-character handling.\n- Don't use `else` blocks when the `if` block breaks early.\n- Don't use yoda expressions.\n- Don't use Array constructors.\n- Use `at()` instead of integer index access.\n- Follow curly brace conventions.\n- Use `else if` instead of nested `if` statements in `else` clauses.\n- Use single `if` statements instead of nested `if` clauses.\n- Use `new` for all builtins except `String`, `Number`, and `Boolean`.\n- Use consistent accessibility modifiers on class properties and methods.\n- Use `const` declarations for variables that are only assigned once.\n- Put default function parameters and optional function parameters last.\n- Include a `default` clause in switch statements.\n- Use the `**` operator instead of `Math.pow`.\n- Use `for-of` loops when you need the index to extract an item from the iterated array.\n- Use `node:assert/strict` over `node:assert`.\n- Use the `node:` protocol for Node.js builtin modules.\n- Use Number properties instead of global ones.\n- Use assignment operator shorthand where possible.\n- Use function types instead of object types with call signatures.\n- Use template literals over string concatenation.\n- Use `new` when throwing an error.\n- Don't throw non-Error values.\n- Use `String.trimStart()` and `String.trimEnd()` over `String.trimLeft()` and `String.trimRight()`.\n- Use standard constants instead of approximated literals.\n- Don't assign values in expressions.\n- Don't use async functions as Promise executors.\n- Don't reassign exceptions in catch clauses.\n- Don't reassign class members.\n- Don't compare against -0.\n- Don't use labeled statements that aren't loops.\n- Don't use void type outside of generic or return types.\n- Don't use console.\n- Don't use control characters and escape sequences that match control characters in regular expression literals.\n- Don't use debugger.\n- Don't assign directly to document.cookie.\n- Use `===` and `!==`.\n- Don't use duplicate case labels.\n- Don't use duplicate class members.\n- Don't use duplicate conditions in if-else-if chains.\n- Don't use two keys with the same name inside objects.\n- Don't use duplicate function parameter names.\n- Don't have duplicate hooks in describe blocks.\n- Don't use empty block statements and static blocks.\n- Don't let switch clauses fall through.\n- Don't reassign function declarations.\n- Don't allow assignments to native objects and read-only global variables.\n- Use Number.isFinite instead of global isFinite.\n- Use Number.isNaN instead of global isNaN.\n- Don't assign to imported bindings.\n- Don't use irregular whitespace characters.\n- Don't use labels that share a name with a variable.\n- Don't use characters made with multiple code points in character class syntax.\n- Make sure to use new and constructor properly.\n- Don't use shorthand assign when the variable appears on both sides.\n- Don't use octal escape sequences in string literals.\n- Don't use Object.prototype builtins directly.\n- Don't redeclare variables, functions, classes, and types in the same scope.\n- Don't have redundant \"use strict\".\n- Don't compare things where both sides are exactly the same.\n- Don't let identifiers shadow restricted names.\n- Don't use sparse arrays (arrays with holes).\n- Don't use template literal placeholder syntax in regular strings.\n- Don't use the then property.\n- Don't use unsafe negation.\n- Don't use var.\n- Don't use with statements in non-strict contexts.\n- Make sure async functions actually use await.\n- Make sure default clauses in switch statements come last.\n- Make sure to pass a message value when creating a built-in error.\n- Make sure get methods always return a value.\n- Use a recommended display strategy with Google Fonts.\n- Make sure for-in loops include an if statement.\n- Use Array.isArray() instead of instanceof Array.\n- Make sure to use the digits argument with Number#toFixed().\n- Make sure to use the \"use strict\" directive in script files.\n\n### Next.js Specific Rules\n- Don't use `` elements in Next.js projects.\n- Don't use `` elements in Next.js projects.\n- Don't import next/document outside of pages/_document.jsx in Next.js projects.\n- Don't use the next/head module in pages/_document.js on Next.js projects.\n\n### Testing Best Practices\n- Don't use export or module.exports in test files.\n- Don't use focused tests.\n- Make sure the assertion function, like expect, is placed inside an it() function call.\n- Don't use disabled tests.\n\n## Common Tasks\n- `npx ultracite init` - Initialize Ultracite in your project\n- `npx ultracite fix` - Format and fix code automatically\n- `npx ultracite check` - Check for issues without fixing\n\n## Example: Error Handling\n```typescript\n// ✅ Good: Comprehensive error handling\ntry {\n const result = await fetchData();\n return { success: true, data: result };\n} catch (error) {\n console.error('API call failed:', error);\n return { success: false, error: error.message };\n}\n\n// ❌ Bad: Swallowing errors\ntry {\n return await fetchData();\n} catch (e) {\n console.log(e);\n}\n```\n\n\n# Magic UI Component Reference\n\n## Purpose\n\nUse this document to choose the right Magic UI component and avoid integration mistakes before implementation.\n\n## Install Contract\n\n- Initialize shadcn once per project:\n```bash\nnpx shadcn@latest init\n```\n- Add components via registry:\n```bash\nnpx shadcn@latest add @magicui/\n```\n- Default import path is usually:\n```tsx\nimport { ComponentName } from \"@/components/ui/\"\n```\n\nIf the project does not use `@/` aliases, adapt import paths to local conventions.\n\n## Families\n\n### Layout And Social Proof\n\n- `marquee`\n- `avatar-circles`\n- `bento-grid`\n\nUse for logo rails, testimonial movement, and feature grids.\n\n### Hero And Visual Anchors\n\n- `globe`\n- `warp-background`\n- `animated-grid-pattern`\n- `retro-grid`\n\nUse one primary visual anchor per hero to keep hierarchy clear.\n\n### Text Motion\n\n- `blur-fade`\n- `text-animate`\n- `word-rotate`\n- `sparkles-text`\n- `typing-animation`\n\nUse when product messaging needs motion emphasis.\n\n### Buttons And CTA Emphasis\n\n- `shiny-button`\n- `shimmer-button`\n- `rainbow-button`\n- `ripple-button`\n\nKeep CTA style consistent within one page section.\n\n### Ambient Effects\n\n- `particles`\n- `flickering-grid`\n- `dot-pattern`\n- `grid-pattern`\n- `light-rays`\n\nUse these as supporting layers, not primary content.\n\n## Integration Notes\n\n- Some components require additional dependencies (for example `cobe`, `motion` for `globe` patterns).\n- Some components require global CSS keyframes (for example `marquee` variants).\n- Prefer prop-level customization before editing generated source.\n- If customization grows large, wrap the component in a local section component rather than editing registry output directly.\n\n## Quality Checks\n\n- Accessibility: interactive controls remain keyboard-accessible.\n- Readability: animated backgrounds do not reduce text contrast.\n- Responsiveness: no horizontal overflow on small screens.\n- Performance: avoid stacking multiple expensive animated backgrounds in one viewport.\n\n\n# Magic UI Recipes\n\n## Purpose\n\nUse these recipes when the user asks for concrete UI sections rather than a single component.\n\n## Recipe 1: Hero With Visual Depth\n\n### Goal\n\nCreate a hero section with strong visual identity and clear CTA hierarchy.\n\n### Suggested Stack\n\n- Primary visual: `warp-background` or `animated-grid-pattern`\n- Heading entrance: `blur-fade`\n- CTA: `shiny-button`\n\n### Steps\n\n1. Install components:\n```bash\nnpx shadcn@latest add @magicui/warp-background @magicui/blur-fade @magicui/shiny-button\n```\n2. Wrap hero content in the background component.\n3. Animate heading and subheading with subtle stagger.\n4. Keep one primary CTA and one secondary action.\n\n### Guardrails\n\n- Keep animations under control: avoid combining more than two high-motion effects in hero.\n- Preserve text contrast over animated backgrounds.\n\n## Recipe 2: Testimonial And Logo Trust Rail\n\n### Goal\n\nShow social proof without static blocks.\n\n### Suggested Stack\n\n- `marquee`\n- `avatar-circles` (optional for compact profile clusters)\n\n### Steps\n\n1. Install:\n```bash\nnpx shadcn@latest add @magicui/marquee @magicui/avatar-circles\n```\n2. Use horizontal marquee for desktop and reduced density on mobile.\n3. If using avatar clusters, add concise labels and accessible alt text.\n\n### Guardrails\n\n- Ensure auto-scrolling content can pause on hover/focus for usability.\n- Do not overload with long testimonial paragraphs in moving rails.\n\n## Recipe 3: Feature Grid With Motion Highlights\n\n### Goal\n\nPresent product capabilities in an interactive but readable grid.\n\n### Suggested Stack\n\n- `bento-grid`\n- One text motion component per card group (`text-animate` or `word-rotate`)\n\n### Steps\n\n1. Install:\n```bash\nnpx shadcn@latest add @magicui/bento-grid @magicui/text-animate\n```\n2. Keep card copy short and scannable.\n3. Use motion for emphasis on only 1-2 cards.\n\n### Guardrails\n\n- Maintain consistent card heights where possible.\n- Avoid running simultaneous animations in every card.\n\n## Final Validation Checklist\n\n- Layout works at mobile and desktop breakpoints.\n- Interactive elements are reachable with keyboard navigation.\n- Motion supports content hierarchy instead of competing with it.\n- Added components compile with the current path alias setup.\n\n\n---\nname: magic-ui\ndescription: Use this skill when users want to add, customize, or troubleshoot Magic UI components in React/Next.js projects. It covers component selection, shadcn registry installation (`@magicui/*`), integration patterns, and practical quality checks for accessibility and maintainability.\nmetadata:\n short-description: Build and customize UIs with Magic UI components\n---\n\n# Magic UI\n\nUse this skill when the task involves Magic UI components, animated UI sections, or converting static sections into interactive UI using the Magic UI registry.\n\n## When To Apply\n\nApply this skill when users ask to:\n\n- Add a Magic UI component (for example: marquee, globe, blur-fade, shiny-button)\n- Build a section with Magic UI effects (hero, testimonials, CTA, feature grid)\n- Replace custom animation code with Magic UI components\n- Troubleshoot installation/import issues for `@magicui/*`\n\n## Core Workflow\n\n1. Define the UI outcome first.\n - Identify section type, tone, motion intensity, and responsive behavior.\n - Keep motion intentional; avoid stacking many high-motion effects in one viewport.\n\n2. Confirm project prerequisites.\n - Project should be React/Next.js with Tailwind CSS.\n - shadcn must be initialized before adding registry components:\n```bash\nnpx shadcn@latest init\n```\n\n3. Install the selected component(s).\n```bash\nnpx shadcn@latest add @magicui/\n```\nExample:\n```bash\nnpx shadcn@latest add @magicui/magic-card\n```\n\n4. Integrate into the target section.\n - Import from the generated path (typically `@/components/ui/`).\n - Keep component APIs intact; prefer prop/className customization over rewriting internals.\n - If docs mention extra dependencies or CSS keyframes, add them during integration.\n\n5. Validate quality before finishing.\n - Accessibility: semantic HTML, keyboard access, meaningful labels/text.\n - Responsiveness: check mobile layout and overflow behavior.\n - Performance: avoid unnecessary client-only wrappers and heavy animation stacking.\n - Maintainability: keep new code modular and consistent with existing project conventions.\n\n## References To Load On Demand\n\n- For component choice, install shape, and dependency expectations:\n - Read `references/components.md`\n- For section-level implementation patterns:\n - Read `references/recipes.md`\n\n## Quick Component Selection Heuristics\n\n- Social proof/logo rails: `marquee`, `avatar-circles`\n- Hero visual impact: `globe`, `warp-background`, `animated-grid-pattern`\n- Text animation: `blur-fade`, `text-animate`, `word-rotate`, `sparkles-text`\n- CTA emphasis: `shiny-button`, `shimmer-button`, `rainbow-button`\n- Ambient backgrounds: `grid-pattern`, `dot-pattern`, `particles`, `flickering-grid`\n\nStart with 1 core component + 1 supporting effect, then expand only if needed.\n\n## Troubleshooting\n\n- `components.json` or registry init error:\n - Run `npx shadcn@latest init` in the project root.\n- Import path mismatch (`@/` alias not configured):\n - Use the project's alias style or relative imports.\n- Visual mismatch after install:\n - Check for required global CSS/keyframes listed in the component docs.\n- Missing package errors:\n - Install dependencies listed in the component's manual installation steps.\n\n## Reference Links\n\n- Magic UI docs: `https://magicui.design/docs`\n- Component docs: `https://magicui.design/docs/components`\n- Installation: `https://magicui.design/docs/installation`\n- MCP setup (optional, for AI IDE workflows): `https://magicui.design/docs/mcp`\n\n\n{\n \"mcpServers\": {\n \"shadcn\": {\n \"command\": \"npx\",\n \"args\": [\"shadcn@latest\", \"mcp\"]\n }\n }\n}\n\n\n{\n \"mcpServers\": {\n \"magicuidesign-mcp\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@magicuidesign/mcp@latest\"]\n }\n }\n}\n"}