skills.rest
DieStok
DieStokCOMMUNITY
Explore all skills by this author →
GitHub

ce-frontend-design

Detect design systems and enforce coherent typography, color, and layout in frontend projects.

Updated Apr 26, 2026
Search Tags:#typography#design#accessibility#frontend#composition#color#ux
One-click install
npx skills add https://github.com/DieStok/ridder_lab_retreat_ai_hackathon_2026 --skill ce-frontend-design-diestok
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ce-frontend-design
Source: https://github.com/DieStok/ridder_lab_retreat_ai_hackathon_2026/tree/main/.agents/skills/compound-engineering/skills/ce-frontend-design
Command: npx skills add https://github.com/DieStok/ridder_lab_retreat_ai_hackathon_2026 --skill ce-frontend-design-diestok

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams struggle to maintain distinctive, production-grade interfaces that respect existing design systems and ensure consistent typography, color, and layout across projects.

Core Features & Use Cases

  • Detect existing design tokens, component patterns, and typography rules to align new work with the codebase.
  • Plan and execute frontend interfaces that balance aesthetics with usability, accessibility, and performance.
  • Use in greenfield builds or when modifying an existing app to upgrade UI quality while preserving system coherence.

Quick Start

Describe how to initiate a frontend design workflow that respects an existing design system and delivers production-grade interfaces.

Frequently Asked Questions about ce-frontend-design

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

FAQPage Schema
How do I maintain a consistent frontend design system when modifying an existing web app?▼

Maintain a consistent frontend design system by detecting existing design tokens, component patterns, and typography rules to align new UI work with the codebase. This ensures system coherence while upgrading interface quality.

What is the best way to balance visual aesthetics with accessibility in frontend development?▼

Balance visual aesthetics with accessibility by planning and executing interfaces that enforce coherent typography, color, and layout. This approach satisfies accessibility requirements while delivering production-grade visual design.

Can I use this approach for greenfield builds or does it only work for existing codebases?▼

You can use this approach for both greenfield builds and modifications of existing apps. It detects design systems to enforce coherent typography, color, and layout, ensuring production-grade interfaces whether starting fresh or upgrading existing projects.

How do I ensure component composition adheres to existing design tokens during a UI upgrade?▼

To ensure component composition adheres to existing design tokens during a UI upgrade, apply design-focused frontend guidance that detects and satisfies requirements for existing tokens. This enforces visual coherence and layout consistency across modern web projects.

Does frontend design guidance include visual verification during the build process?▼

Frontend design guidance includes visual verification during the build process. It satisfies requirements for adherence to existing tokens or systems, component composition, and accessibility while ensuring production-grade interface quality.

Related Skills

Explore More Design & Creative Skills→
Ayub-KhanAyub-Khan

ui-ux-design

Define scalable UI/UX design systems with tokens for Figma handoff.

Community
Intermediate
rethinkhealthrethinkhealth
6

frontend-design

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

Official
Advanced
StonelukasStonelukas

ui-ux-pro-max

Search UI/UX guidelines across nine stacks to assemble design systems.

Community
Advanced
SKANLSKANL

nextjs-shadcn-builder

Analyze frontend codebases and generate Next.js + shadcn/ui migration plans.

Community
Advanced