skills.rest
xbpk3t
xbpk3tCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Design frontend interfaces that detect existing design systems and verify visually.

Updated Aug 27, 2026
Search Tags:#typography#design#accessibility#frontend#ux#motion#visual-verification
One-click install
npx skills add https://github.com/xbpk3t/ce-codex --skill frontend-design-xbpk3t
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/xbpk3t/ce-codex/tree/main/skills/frontend-design
Command: npx skills add https://github.com/xbpk3t/ce-codex --skill frontend-design-xbpk3t

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams and agents produce distinctive, production-ready frontend interfaces that avoid generic AI aesthetics by detecting existing design systems, guiding coherent design and interaction plans, and verifying results visually to reduce revision cycles.

Core Features & Use Cases

  • Context detection: scan the codebase for design tokens, component libraries, CSS frameworks, typography, color palettes, and animation libraries to choose an appropriate mode (existing, partial, greenfield, ambiguous).
  • Pre-build planning: produce a concise visual thesis, content plan, and interaction plan before writing code to align stakeholders and reduce rework.
  • Design guidance and implementation: apply rules for typography, color, composition, motion, accessibility, and imagery with modules for landing pages, dashboards/apps, and components inside existing systems.
  • Verification and litmus checks: perform a single-pass visual verification using available browser automation or a screenshot-based review and fix glaring issues before finalizing.
  • Use case: integrate a new data table component into an existing React + Tailwind project while matching spacing tokens, focus states, and motion patterns.

Quick Start

Design a responsive dashboard page that respects the project's existing design tokens and includes a visual thesis, content plan, and one verification screenshot.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I design a frontend interface that matches my existing design tokens and component library?▼

Designing a frontend interface that matches existing design tokens involves scanning the codebase to detect current CSS frameworks and component libraries, then applying a coherent visual thesis and interaction plan that respects those established spacing and motion patterns.

Can I build a production-grade landing page without generating generic AI aesthetics?▼

Building a production-grade landing page without generic AI aesthetics requires pre-build planning to establish a concise visual thesis, content plan, and interaction plan, applying specific rules for typography, color, composition, and motion before writing code.

How do I ensure my web application meets WCAG contrast and semantic HTML standards during frontend development?▼

Ensuring a web application meets WCAG contrast and semantic HTML standards requires applying accessibility enforcement rules during the design guidance phase, checking visual composition and code semantics before finalizing the interface.

What is the best way to visually verify a new dashboard component after implementation?▼

The best way to visually verify a new dashboard component is performing a single-pass visual verification using available browser automation or a screenshot-based review to identify and fix glaring layout issues before finalizing.

Does this frontend design approach work for integrating a data table into an existing React and Tailwind project?▼

This frontend design approach works for integrating a data table into an existing React and Tailwind project by detecting the partial design system, matching focus states and spacing tokens, and verifying the component visually within the existing codebase.

How do I plan interactions and motion patterns for a greenfield web application interface?▼

Planning interactions and motion patterns for a greenfield web application interface involves detecting the absence of existing design systems, applying a coherent greenfield aesthetic, and establishing an interaction plan before writing frontend code.

Related Skills

Explore More Design & Creative Skills→
chicongstchicongst
2

ui-design

Automates UI design execution by applying tokens, palettes, typography and spacing across frameworks.

Community
Intermediate
rethinkhealthrethinkhealth
6

frontend-design

Plan and implement frontend designs using existing design tokens and screenshot verification.

Official
Advanced
baasith6baasith6

dark-mode-testing

Toggle Cursor browser themes and capture screenshots to detect contrast issues.

Community
Intermediate
StephanvsStephanvs
6

software-architect

Enforce high cohesion, low coupling, and composition-first design in software architecture.

Community
Advanced