skills.rest
vitallium
vitalliumCOMMUNITY
Explore all skills by this author →
𝕏@VitalliummGitHub

ce-frontend-design

Audit design signals and generate frontend design plans with verification steps.

10|Updated Dec 13, 2016
Search Tags:#typography#design#accessibility#frontend#color#motion#design-systems
One-click install
npx skills add https://github.com/vitallium/dotfiles --skill ce-frontend-design-vitallium
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ce-frontend-design
Source: https://github.com/vitallium/dotfiles/tree/main/dot_agents/skills/ce-frontend-design
Command: npx skills add https://github.com/vitallium/dotfiles --skill ce-frontend-design-vitallium

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Builds frontend interfaces with genuine design quality, respecting existing design systems and providing guidance beyond AI aesthetics.

Core Features & Use Cases

  • Design audit against existing signals (tokens, typography, color, spacing, motion) to determine applicable patterns.
  • Plan, build, and verify frontend designs aligned with system constraints for landing pages, dashboards, admin panels, components, and interactive experiences.
  • Quick-start workflow: assess the current project, generate a plan, and kick off the design execution with artifact checks.

Quick Start

Provide project context and any existing design constraints to begin the design audit.

Frequently Asked Questions about ce-frontend-design

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

FAQPage Schema
How do I design frontend interfaces that align with my existing design system?▼

To design frontend interfaces aligned with an existing design system, audit current design tokens, typography, color, spacing, and motion signals to generate an actionable design plan and verification steps.

How do I avoid generic AI aesthetics when building landing pages and dashboards?▼

Avoid generic AI aesthetics by detecting existing layout constraints and motion signals during a design audit, then applying system-specific patterns to guide the production-grade frontend build.

Can I use this to build admin panels and interactive frontend components?▼

Yes, you can use this to build admin panels and interactive frontend components by planning and verifying designs against detected system constraints before executing the production-grade interface build.

What's the best way to audit an existing frontend project for design constraints?▼

The best way to audit an existing frontend project for design constraints is to assess current project context and extract design tokens, typography, and color signals to determine applicable patterns.

Do I need existing design tokens to plan a production-grade frontend interface?▼

You do not need existing design tokens for greenfield builds, but for modifications to existing apps, detecting tokens, typography, and color signals is required to ensure genuine design quality.

Related Skills

Explore More Design & Creative Skills→
fatihkanfatihkan
7

redesign-existing-projects

Audit existing projects and provide non-destructive design upgrade plans.

Community
Intermediate
rethinkhealthrethinkhealth
6

frontend-design

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

Official
Advanced
muklesmukles

frontend-design

Detect design signals and propose typography, color, spacing, and accessibility guidelines.

Community
Advanced
himanshu231204himanshu231204
2

design-system

Generate design systems and audit visual consistency across web UIs.

Community
Intermediate