skills.rest
concept2cure
concept2cureCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Coordinate frontend UI design with Claude principles and registry-based components.

1|Updated Nov 13, 2025
Search Tags:#design#accessibility#frontend#design-principles#aesthetics#component-registry#claude-ui
One-click install
npx skills add https://github.com/concept2cure/ClinicalSageAI-2-replit --skill frontend-design-concept2cure
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/concept2cure/ClinicalSageAI-2-replit/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/concept2cure/ClinicalSageAI-2-replit --skill frontend-design-concept2cure

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill guides the creation of distinctive, production-grade frontend interfaces with a Claude-first aesthetic, ensuring consistency and governance across components.

Core Features & Use Cases

  • Claude-guided aesthetics: Apply a calm, restrained Claude design philosophy to UI work.
  • Component-registry discipline: Build using only registry components from the governed registry and existing tokens.
  • Conformance and accessibility: Adhere to established UI standards, mobile-first patterns, and dark-mode support to ensure accessibility and consistency.

Quick Start

Create a Claude-guided frontend component that conforms to the registry, tokens, and accessibility standards, then integrate it into a mobile-first page.

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build frontend interfaces that follow strict design token and registry rules?▼

To build frontend interfaces with strict design tokens, use a governed component registry that enforces established UI standards, ensuring only approved components and tokens are applied for visual consistency. This coordinates UI design with defined aesthetic principles.

What is a Claude-guided aesthetic in frontend UI design?▼

A Claude-guided aesthetic in frontend UI design applies a calm, restrained design philosophy to component development, ensuring production-grade interfaces maintain visual consistency and adhere to established design principles across all pages.

How do I ensure mobile-first accessibility and dark mode support when creating UI components?▼

To ensure mobile-first accessibility and dark mode support, build UI components within a governed registry that enforces conformance to established UI standards, automatically handling color tokens and mobile-first layout patterns.

Can I use custom UI components outside of a governed component registry?▼

You should not use custom UI components outside of a governed component registry if strict convergence rules apply. Registry-based component usage ensures typography, color tokens, and accessibility standards are met without deviations.

Does this approach to frontend design work for building small apps or just individual pages?▼

This frontend design approach works for building individual components, complete pages, and small apps. It applies a governed registry and Claude design principles consistently across all scales to ensure unified aesthetics and standards.

Related Skills

Explore More Design & Creative Skills→
priyansh19priyansh19
1

design-guide

Establish and enforce CrewSpace UI design system standards across frontend components.

Community
Advanced
moughamirmoughamir

web-design-methodology

Standardize web UI with token-first CSS and BEM naming.

Community
Intermediate
Yoriichi-DangYoriichi-Dang

design-system-patterns

Codify design tokens, theming, and component APIs for scalable design systems.

Community
Advanced
bonnguyenitcbonnguyenitc
19

frontend-developer

Guide frontend architecture and review tasks with reusable component patterns.

Community
Intermediate