Original
Design System Architecture
Establish a small versioned system of semantic tokens, accessible primitives and feature compositions with clear ownership and migration criteria.
Design systemsexperimental
← All bundles
9 CANONICAL SKILLS · V0.1.0
Interface Design Systems
A coherent design brief, semantic tokens, Tailwind variants, accessible primitives, consistent icons, responsive composition and purposeful motion.
Inspect the selection
View manifest ↗Run from a full toolkit checkout. This prints a file manifest, not an installer.
node tools/bundle.mjs resolve interface-designExplore the frontend worked guide →
Original
Interface Design Brief
Turn a frontend task into a coherent, testable interface direction grounded in the audience, product workflow, existing system and realistic content states.
Design systemsexperimental
Original
Icon System Integration — React Icons
Select and integrate a coherent icon family using React Icons, Lucide or an existing library with accessible meaning, bounded imports and preserved upstream license information.
Iconsexperimental
Original
Animation and Motion Design
Use motion to explain interaction and hierarchy while preserving reduced-motion alternatives, interruption behavior and rendering performance.
Design systemsexperimental
Original
Headless Components and shadcn/ui
Compose installed headless primitives and shadcn/ui source components without breaking keyboard semantics, local changes or version-specific APIs.
Design systemsexperimental
Original
Tailwind CSS Engineering
Build maintainable utility-based interfaces with version-correct tokens, statically discoverable variants, responsive behavior and tested component composition.
Tailwind CSSexperimental
Original
Responsive UI Implementation
Implement layouts that adapt to container space, content length, input mode and zoom without hiding required actions or masking overflow.
Layoutexperimental
Original
Frontend Accessibility
Implement and verify accessible frontend interactions through native semantics, meaningful names, keyboard/focus behavior and explicit assistive-technology limits.
Accessibilityexperimental
Original
Visual Regression and UI Verification
Use reproducible visual evidence to detect frontend regressions while preserving independent interaction, accessibility and content checks.
Testingexperimental
Tailor context, not a second copy.
Pick the skill needed for the current task. A private adapter supplies project-specific roots, command IDs, accepted contracts, and policy. It should pin and verify the public revision before exposing guidance to an internal agent.
Skill effectiveness remains experimental. Package validation and content hashes do not establish host compatibility, artifact authenticity, or permission to execute.
Read the private-adapter boundary ↗