skills.rest
simonwjackson
simonwjacksonCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

se-frontend-design

Identify frontend design gaps and implement interfaces aligned with existing design systems.

Updated May 7, 2026
Search Tags:#typography#accessibility#ui-ux#design-systems#color-palette#frontend-design
One-click install
npx skills add https://github.com/simonwjackson/pi-software-engineering --skill se-frontend-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: se-frontend-design
Source: https://github.com/simonwjackson/pi-software-engineering/tree/main/skills/se-frontend-design
Command: npx skills add https://github.com/simonwjackson/pi-software-engineering --skill se-frontend-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Modern frontend work often devolves into generic aesthetics that fail to respect existing design systems or deliver distinctive, production-grade interfaces. This skill guides detection of context signals, planning of design strategy, and execution with typography, color, motion, and copy that align with the project’s system.

Core Features & Use Cases

  • Context detection and planning: scans the codebase to identify design tokens, component libraries, and typography usage to inform decisions.
  • Design system alignment: ensures new work adheres to tokens, spacing, and accessibility standards of the existing system.
  • Verification & handoff: produces visual plans and a simple quick-start command to reproduce the result; suitable for dashboards, landing pages, admin panels, and components.

Quick Start

Describe your project context and let the system plan and implement a production-grade frontend design that respects your design system.

Frequently Asked Questions about se-frontend-design

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

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

Design system alignment scans the codebase to identify existing design tokens, component libraries, and typography usage, then applies them to produce interfaces that respect the project's spacing and accessibility standards.

What's the best way to plan frontend design strategy for a greenfield project?▼

Planning frontend design strategy for greenfield projects involves detecting context signals from the codebase, defining typography and color palettes, and executing production-grade interfaces with motion and copy that align with the system.

How do I ensure accessibility standards are met when building UI components?▼

To ensure accessibility standards are met when building UI components, verify visual output against the project's design system, checking that typography, color palette, and functional requirements satisfy accessibility constraints during implementation.

Can I use this approach to modify interfaces in existing apps without breaking the design system?▼

Yes, modifying interfaces in existing apps works by detecting design tokens and component libraries already present, then guiding implementation and visual verification to ensure new work adheres to the established system.

Why does my frontend UI look generic instead of matching distinct project aesthetics?▼

Frontend UI looks generic when it fails to respect existing design systems or detect context signals, a problem solved by scanning for design tokens and typography usage to inform distinctive, production-grade interface execution.

Related Skills

Explore More Design & Creative Skills→
SL-A-SHSL-A-SH

extract

Extract reusable UI components, design tokens, and interaction patterns from codebases.

Community
Intermediate
jaydubya818jaydubya818

frontend-design

Plan and implement frontend designs aligned with existing design systems.

Community
Advanced
dirnbauerdirnbauer
33

frontend-design

Design frontend interfaces with typography, color palettes, motion, and CSS/HTML examples.

Community
Basic
silva2kandsilva2kand

frontend-design

Create and style production-grade frontends with bold visual aesthetics.

Community
Intermediate