skills.rest
thisisryanswift
thisisryanswiftCOMMUNITY
Explore all skills by this author →
𝕏@thisisrsyanswiftGitHub

ce-frontend-design

Detect design systems and plan, build, and verify frontend interfaces.

2|Updated Apr 30, 2026
Search Tags:#typography#workflow#accessibility#verification#color#design-systems#frontend-design
One-click install
npx skills add https://github.com/thisisryanswift/zellij-agent-tools --skill ce-frontend-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ce-frontend-design
Source: https://github.com/thisisryanswift/zellij-agent-tools/tree/main/.opencode/skills/ce-frontend-design
Command: npx skills add https://github.com/thisisryanswift/zellij-agent-tools --skill ce-frontend-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designer and developer teams waste time reconciling inconsistent frontend visuals across greenfield and legacy projects. This skill guides detection of existing design systems and provides a structured workflow to plan, build, and verify UI.

Core Features & Use Cases

  • Detect design tokens, variables, and conventions in the codebase and establish a cohesive design baseline.
  • Plan, implement, and visually verify frontend interfaces for landing pages, dashboards, admin panels, components, and interactive experiences while respecting existing patterns.
  • Verify results via screenshots, accessibility checks, and alignment with the design system, enabling quick iteration.

Quick Start

Analyze the current project to detect existing design signals, then plan and begin implementing a cohesive frontend design aligned with the detected system.

Frequently Asked Questions about ce-frontend-design

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

FAQPage Schema
How do I align new frontend designs with an existing design system?▼

Align new frontend designs by detecting existing design tokens and variables in a codebase to establish a cohesive baseline. This ensures new UI components and layouts adhere to current typography, color, and accessibility conventions.

What is the best workflow for building landing pages and dashboards while respecting existing design patterns?▼

The best workflow for building interfaces involves planning, implementing, and visually verifying frontend designs against detected design tokens. This structured process ensures landing pages and dashboards maintain system consistency and accessibility standards.

Can I use this frontend design workflow for greenfield projects and migrations?▼

Yes, this frontend design workflow supports both greenfield projects and legacy migrations. It identifies existing design signals to build a cohesive baseline, allowing you to apply production-grade design patterns across various project stages.

How do I verify accessibility and visual alignment in frontend components?▼

Verify accessibility and visual alignment by checking screenshots and validating UI components against the established design system. This enables quick iteration and ensures frontend interfaces meet required accessibility and layout standards.

Does this frontend design process work across multiple frameworks?▼

Yes, the frontend design process is applicable across frameworks. It guides the planning, building, and validation of UI components by detecting and applying existing design system conventions regardless of the specific framework used.

Related Skills

Explore More Design & Creative Skills→
1IssaMohamed1IssaMohamed

extract

Identify reusable patterns, components, and design tokens for design system extraction.

Community
Intermediate
rahul-s-bhattrahul-s-bhatt

frontend-design

Design distinctive frontend interfaces with cohesive visual systems and responsive layouts.

Community
Advanced
rethinkhealthrethinkhealth
6

frontend-design

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

Official
Advanced
kivakiva
4

figma-design-system-to-skill

Extract Figma design system sections into consistent Kiva agent skills.

Official
Advanced