skills.rest
hb9397
hb9397COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Implements responsive frontend UI components with CSS variables and design tokens.

Updated Mar 5, 2026
Search Tags:#ui#frontend#css#components#web-development#design-system
One-click install
npx skills add https://github.com/hb9397/ai-agent-harness-docs --skill frontend-design-hb9397
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/hb9397/ai-agent-harness-docs/tree/main/plugins/ai-agent-harness/runtime/claude/skills/frontend-design
Command: npx skills add https://github.com/hb9397/ai-agent-harness-docs --skill frontend-design-hb9397

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill solves the challenge of creating high-quality, production-ready frontend code that maintains design consistency and avoids generic boilerplate patterns.

Core Features & Use Cases

  • Production UI Implementation: Translates design requirements into functional, responsive web pages and components.
  • Design System Integration: Ensures code adheres to existing design tokens, motion languages, and component libraries.
  • Use Case: When you need to implement a new dashboard page, this skill ensures the layout, typography, and state transitions match your existing product design system rather than creating disconnected, generic UI.

Quick Start

Use the frontend-design skill to implement the new user profile component based on the approved design system tokens.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build production-grade UI components that match an existing design system?▼

Production-grade UI components require strict adherence to project-specific design tokens and CSS variables, translating design requirements into responsive layouts that integrate existing motion specifications and component libraries seamlessly.

How do I implement responsive web pages without generating generic boilerplate code?▼

Implementing responsive web pages without generic boilerplate requires integrating existing design system tokens and motion languages, applying CSS variable-based styling, and validating output through automated linting and type checking.

Do I need existing design tokens to use a frontend UI implementation workflow?▼

Yes, existing design tokens are required. The workflow strictly enforces adherence to project-specific design tokens and motion specifications to prevent disconnected UI, relying on predefined CSS variables for styling.

What is the best way to ensure accessibility compliance when developing web application frontend components?▼

Ensuring accessibility compliance requires applying design system integration during component implementation and validating the frontend UI code through automated linting and type checking to meet production standards.

Why does my new dashboard page UI look disconnected from the main product design system?▼

Dashboard pages look disconnected when they lack integration with existing design tokens and motion languages, resulting in generic boilerplate UI instead of consistent, production-ready frontend code.

Related Skills

Explore More Design & Creative Skills→
bykoleksii-hardobykoleksii-hardo

ckm:design-system

Generate CSS variables from design tokens JSON configurations.

Community
Advanced
Angriff36Angriff36

Frontend Implementation

Guide frontend UI development across React, Vue, and Angular projects.

Community
Advanced
jangtrinhjangtrinh

ck:ui-styling

Integrate shadcn/ui components with Tailwind CSS for accessible, theme-consistent UI styling.

Community
Intermediate
jangtrinhjangtrinh

tailwind

Apply Tailwind v4 utility patterns to EaseUI components for responsive styling.

Community
Intermediate