القائمة
Use when the user asks to build web components, pages, or applications that need distinctive, production-grade frontend interfaces with high design quality
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Use when creating a Jira ticket to plan upcoming work. Guides ticket drafting with clear structure, self-contained context, and testable acceptance criteria, then creates the ticket via the available Jira/Atlassian broker tool.
Use when reviewing a pull request, branch, commit range, working tree diff, plan, document, or other coherent unit of work across correctness, security, codebase alignment, code quality, test quality, performance, and simplicity.
Use when the user asks to create or polish a standalone HTML artifact such as an HTML report, interactive explainer, visual plan, dashboard, slide deck, diagram, prototype, or throwaway HTML tool.
Use when debugging bugs, failures, exceptions, flaky behavior, regressions, or performance problems where the cause is not already proven.
Reference skill for browser automation: web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.
Use when implementing a feature or bugfix that involves writing meaningful application logic
| name | frontend-design |
| description | Use when the user asks to build web components, pages, or applications that need distinctive, production-grade frontend interfaces with high design quality |
| license | Complete terms in LICENSE |
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
Before coding, understand the context and choose an intentional aesthetic direction. Existing design systems, brand requirements, accessibility, performance, and explicit user constraints take precedence; seek stronger differentiation when those constraints leave room:
Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — what matters is intentionality, not intensity.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
Focus on:
Avoid generic AI-generated aesthetics: clichéd gradients, predictable component arrangements, decorative effects without purpose, and cookie-cutter design that lacks context-specific character. Common fonts, layouts, and restrained styling are appropriate when required by the existing product; use them intentionally rather than by default.
Interpret creatively where the brief permits it. Vary theme, typography, composition, and visual language according to the product context instead of forcing every interface toward the same fashionable choices.
Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
Commit fully to the chosen direction, including restraint when consistency, usability, accessibility, or performance calls for it.
