Skip to main content

frontend-design

Use when: build or reshape UI with distinctive, intentional visual design instead of generic defaults.

Source facts

Repository
kimtth/agent-skill-100-lines-or-less
Last source activity
June 26, 2026 at 02:15
Detected SKILL.md language
English
Stars
2
Forks
0

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

Showing SKILL.md

SKILL.md
Source instructions · Read-only preview
name
frontend-design
description
Use when: build or reshape UI with distinctive, intentional visual design instead of generic defaults.
Goal: create a UI with a specific visual point of view that fits the brief. Use for: - new frontend screens, landing pages, or app surfaces - visual redesigns that need stronger taste and identity - avoiding templated palettes, typography, and layout defaults Workflow: 1. Ground the design in the subject, audience, and page job. 2. Define a compact token system: color, type, layout, signature element. 3. Check whether choices are specific to this brief or generic defaults. 4. Build from the chosen direction; derive every visual choice from it. 5. Use one memorable signature element, then keep surrounding UI disciplined. 6. Critique the result for responsiveness, focus states, reduced motion, and polish. Design principles: - typography carries personality; choose roles deliberately - structure should encode real information, not decorate - motion should serve the subject and be used sparingly - copy is design material: plain, active, consistent, and useful Rules: - take one justified aesthetic risk - avoid default AI-looking palettes and layouts unless the brief demands them - spend boldness in one place, then remove excess decoration - verify the design on mobile and desktop before calling it done
View on GitHub