This skill streamlines the frontend development process by automating the creation of structured, accessible, and type-safe components. It strictly enforces Atomic Design architecture—categorizing UI elements into Atoms, Molecules, Organisms, and Templates—to ensure a scalable and maintainable codebase. Designed for modern stacks involving Next.js App Router and Tailwind CSS v4, it handles boilerplate tasks such as prop typing, ARIA accessibility attributes, and directory organization, allowing developers to focus on business logic rather than repetitive styling and structure.
主な機能
01Ensures web accessibility through semantic HTML and ARIA attributes
02Enforces Atomic Design hierarchy for scalable component organization
03Generates type-safe TypeScript definitions using React.FC patterns
04Implements modern Tailwind CSS v4 styling with responsive utility classes
050 GitHub stars
06Standardizes file structures with index exports and path aliases