Skills
.Work. You
Rest

front-design

Community

Craft premium mobile-first UI with performance.

Design & Creative#design#theming#ui#react#mobile-first#css-variables#radix-ui
AuthorStonek79
Version1.0.0
Installs0

System Documentation

What problem does it solve?

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.

Core Features & Use Cases

  • Mobile-first UI scaffolding using Radix UI primitives for scalable layouts.
  • Theming guidance with semantic CSS variables to support Dark/Light modes.
  • Token-driven typography and spacing aligned with index.css and design tokens.
  • i18n-ready patterns and component-level accessibility considerations for inclusive interfaces.

Quick Start

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.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: front-design
Download link: https://github.com/Stonek79/knock-knock/archive/main.zip#front-design

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.