Create mobile-first React interfaces with Radix UI and CSS variables.
npx skills add https://github.com/Stonek79/knock-knock --skill front-design
Please help me install this Agent Skill. Skill: front-design Source: https://github.com/Stonek79/knock-knock/tree/main/.agent/skills/front-design Command: npx skills add https://github.com/Stonek79/knock-knock --skill front-design
This Skill helps design teams and developers create premium, mobile-first UI components that adhere to the Knock-Knock design system, ensuring consistency across themes, tokens, and accessibility.
Design and implement a new React component following the Knock-Knock front-design guidelines: start from an existing component, wrap in Radix Flex/Box primitives, apply token variables, ensure theming compatibility, and reference the references for Radix vs CSS Module guidance.
High-intent search queries and answers about installing and using this skill.
To create mobile-first React components, you should wrap elements in Radix UI primitives and apply semantic CSS variables from your index.css. This approach ensures cohesive, theme-aware implementations that support both Dark and Light modes across desktop and mobile contexts.
The best way to implement Dark and Light mode support is by using semantic CSS variables for theming. This token-driven approach aligns typography and spacing with your design tokens to ensure cohesive, theme-aware interfaces without hardcoding values.
Yes, this UI scaffolding approach requires Radix UI primitives. It uses Radix Flex and Box components to build scalable layouts and provides reference guidance for choosing between Radix primitives and CSS Modules for your implementation.
To make React interfaces accessible and i18n-ready, apply component-level accessibility considerations and use established translation patterns. This ensures inclusive interfaces across mobile and desktop contexts without altering core layout logic.
You should choose Radix UI over CSS Modules when you need scalable, accessible layout primitives and consistent theming. The skill references provide specific guidance on when to use Radix primitives versus CSS Modules for your specific UI components.
Mischio95Set up shadcn/ui components and forms with React Hook Form and Zod.
JaveedIshaqGuide react-i18next implementation with Trans, useTranslation, and structured namespaces.
frankxaiImplement token hierarchies with semantic, alias tokens for scalable design systems.
edisonabelCreate accessible responsive interfaces with shadcn/ui components and Tailwind CSS.
