菜单
Design and implement distinctive, production-grade frontend interfaces. Use this skill when you need to shape component structure, states, responsive behavior, accessibility, motion, and performance in code instead of generating generic layouts.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/diegosouzapw/awesome-omni-skills --skill frontend-design-v5命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
Daily Gift workflow skill. Use this skill when the user needs Relationship-aware daily gift engine with five-stage creative pipeline — editorial judgment, synthesis, concept generation, visual strategy, and rendering in H5, image, or video and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
Daily Gift workflow skill. Use this skill when the user needs Relationship-aware daily gift engine with five-stage creative pipeline — editorial judgment, synthesis, concept generation, visual strategy, and rendering in H5, image, or video and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
High-Agency Frontend Skill workflow skill. Use this skill when the user needs building high-agency frontend interfaces with strict design taste, calibrated color, responsive layout, and motion rules and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
基于 SOC 职业分类
| name | frontend-design-v5 |
| description | Design and implement distinctive, production-grade frontend interfaces. Use this skill when you need to shape component structure, states, responsive behavior, accessibility, motion, and performance in code instead of generating generic layouts. |
| version | 0.0.1 |
| category | frontend |
| tags | ["frontend-design-v5","frontend-design","design-systems","responsive-ui","accessibility","performance","progressive-enhancement","omni-enhanced"] |
| complexity | intermediate |
| risk | caution |
| license | Unknown |
| tools |
| ["codex-cli","claude-code","cursor","gemini-cli","opencode"] |
| source | omni-team |
| author | Omni Skills Team |
| date_added | 2026-04-27 |
| date_updated | 2026-05-12 |
| source_type | omni-curated |
| maintainer | Omni Skills Team |
| family_id | frontend-design-v5 |
| family_name | Frontend Design (Distinctive, Production-Grade) |
| variant_id | omni |
| variant_label | Omni Curated |
| is_default_variant | true |
| derived_from | skills/frontend-design-v5 |
| upstream_skill | skills/frontend-design-v5 |
| upstream_author | sickn33 |
| upstream_source | community |
| upstream_pr | 271 |
| upstream_head_repo | diegosouzapw/awesome-omni-skills |
| upstream_head_sha | 93ab394af5645f7127d5003ee02c9566ae5353cd |
| curation_surface | skills_omni |
| enhanced_origin | omni-skills-private |
| source_repo | diegosouzapw/awesome-omni-skills |
| replaces | ["frontend-design-v5"] |
Use this skill when the task is not just to "make a page" but to design and implement a polished frontend that:
This skill preserves the upstream identity and intent while making it more operational for production work. It is for designer-engineer tasks where visual craft and engineering quality must both survive implementation.
Use this skill when the user asks for any of the following:
Do not use this skill as the primary workflow when the task is mainly:
Clarify the interface goal and constraints
Start from content structure and interaction model
Translate design intent into a component system
Implement responsive structure with safe modern CSS
Build accessibility in during implementation
prefers-reduced-motion; motion should support comprehension, never block it.Check performance and interaction quality
Review edge cases before handoff
Return implementation with rationale
button, nav, main, dialog, form, and proper headings when they fit; do not replace them with div wrappers by default.Input
Make the pricing section look premium and modern.
Expected working approach
1. Clarify whether the primary conversion is plan comparison or single-plan signup.
2. Define semantic structure: section > heading > plan list/cards > feature lists > CTA buttons.
3. Decide the visual signature: compact editorial layout, high contrast typography, restrained accent color, minimal decorative effects.
4. Specify states: monthly/yearly toggle, recommended plan, disabled CTA during checkout load, error banner, keyboard focus.
5. Implement component-level responsiveness so cards stack cleanly in narrow containers.
6. Check contrast, focus visibility, and reduced-motion handling for hover/selection transitions.
Expected outcome
A pricing UI that has clear hierarchy, accessible plan selection, stable responsive behavior, and a distinctive visual direction instead of generic SaaS cards.
Input
Build a custom modal from scratch with divs and animated transforms.
Better implementation choice
Use a semantic dialog pattern first, preserve focus management, provide Escape and close-button behavior, reserve animation as progressive enhancement, and ensure the dialog still works when reduced motion is requested.
Expected outcome
A modal/dialog that remains usable with keyboard and assistive technology, while still supporting distinctive styling and optional motion.
For a fuller worked example, open examples/worked-example.md.
Symptoms: The layout looks correct at full-page width but breaks when the component is placed in a narrow sidebar or card grid.
Solution: The component is likely using viewport assumptions for a container problem. Rework responsive rules around the component's own available width. Use container queries where appropriate, simplify minimum widths, and verify that text wrapping and action grouping still work in constrained parents.
Symptoms: Styles become unpredictable after integrating with an existing codebase or utility framework.
Solution: Audit cascade order first. Separate tokens, reset/base styles, components, and utilities into deliberate layers. Reduce selector specificity instead of escalating it. Check whether framework utilities are overriding component intent and move fragile overrides into a clearer layer structure.
Symptoms: The interface feels polished visually but fails keyboard or screen-reader use.
Solution: Inspect semantic structure, focus order, labeling, and widget choice before tweaking ARIA. Replace custom controls with native elements when possible. If a custom pattern is necessary, implement the full expected behavior instead of only the visual shell.
Symptoms: Animations feel expensive, distracting, or uncomfortable.
Solution: Reduce simultaneous motion, animate transform/opacity where practical, and provide a meaningful reduced-motion path. Motion should reinforce hierarchy or continuity, not become decoration that slows interaction.
Symptoms: The page shifts during load or interactions feel sluggish.
Solution: Reserve space for images and async sections, reduce expensive visual effects, and inspect whether scripting or rendering work is blocking response. Favor simpler DOM and clearer state transitions over layered effects that hide performance issues.
Symptoms: A custom component looks distinctive but is hard to extend without regressions.
Solution: Pull shared spacing, typography, color, and state rules into reusable primitives. Split structure from variant styling. Distinctive design should come from intentional system decisions, not from unrepeatable one-off CSS.
For compact implementation guardrails, open references/domain-notes.md.
references/domain-notes.md — open this when you need a compact production reference for semantic structure, accessibility thresholds, container-vs-media query decisions, cascade layer ordering, progressive enhancement, and performance guardrails.examples/worked-example.md — open this when a task is underspecified and you need a concrete before/after example showing how to turn a vague UI request into a production-ready implementation plan.No related local skills were provided in the source context.