frontend-design
Design skill for external, non-YURI, non-Kagami surfaces. Use when building client work, external products, public-facing sites, or any UI that is NOT YURI HUD or Kagami. Enforces high-end intentional design systems, prevents AI slop. For YURI/Kagami surfaces, use design-master instead.
- License 许可
- MIT
- 最近更新
- 2026-10-27
- Stars
- ★ 2
- Forks
- 0
01 前言 Front Matter
- name
- frontend-design
- scope
- harness
- triggers
- [ "build a UI", "design a landing page", "fix UX", "create a page", "build a website", "make it look professional", "no AI slop", "production design", "web design", "design principles", "client site", "external product", "public page" ]
- invocation
- ability
- description
- Design skill for external, non-YURI, non-Kagami surfaces. Use when building client work, external products, public-facing sites, or any UI that is NOT YURI HUD or Kagami. Enforces high-end intentional design systems, prevents AI slop. For YURI/Kagami surfaces, use design-master instead.
- routing_note
- EXTERNAL SURFACES ONLY. Do NOT use for YURI HUD or Kagami — those route to design-master. This skill is for: client work, external products, non-YURI public pages, or any surface outside the YURI OS ecosystem.
02 资源文件 1
- 参考文档references/design-principles.md3.3 KB
03 SKILL.md 正文
Frontend Design — External Surfaces
Use this skill to act as Creative Director for external, non-YURI UI/UX tasks.
Scope
In scope: Client sites, external products, public landing pages, any UI outside YURI OS. Out of scope: YURI HUD dashboards, Kagami reports, any surface using --yuri-hud-* or --yuri-kagami-* tokens → use design-master instead.
Load Order (External Work)
- Define industry keywords and brand tone for this project
- Establish CSS variables for colors, typography, spacing
- Pick distinctive font pairing (no Inter/DM Sans by default — use something with personality)
- Select 3-7 references from frontier atlas or Design Radar (not YURI internal packs)
- Reference:
03_RESOURCES/References/design-packs/frontier-design-intelligence/00-start-here.md - Reference:
03_RESOURCES/References/design-packs/framer-university-resource-atlas/00-start-here.mdfor motion/Framer work
Core Principles
- Anti-Generic Mandate: Refuse default choices. No Inter/Arial default. No generic SaaS hero.
- Reference First: Pick 3-7 sources before layout, typography, or motion decisions.
- Motion Integration: CSS animations or framer-motion for micro-interactions.
- Verification: Browser/screenshot check at desktop and mobile before declaring done.
Design System Phase (before any component work)
Define explicitly:
- Industry keywords and brand tone
- Color variables with roles
- Typography scale + font pairing
- Spacing system
- Reference set (named, with rationale)
Session Notes
2026-06-16
- session: 178m | peak ctx: 0% | compacts: 0
- tools: Bash×205, Read×121, WebFetch×114, Edit×87, WebSearch×72, Write×33, TodoWrite×13, Agent×10, ToolSearch×9, Skill×4, AskUserQuestion×1, mcp×1, TaskStop×1
- corrections: go over it again, full red team and grounding in more fresh online research together with local, then check the compatibility across other organs, run phase 1. all agentic nano swarm | 'The legal one is the wall: an Austria-resident running automated Polymarket ' rick we are not doing full automated trading on polymarket, also polymarket is allowed in austria, you mustve fact checke | go over it again, full red team and grounding in more fresh online research together with local, then check the compatibility across other organs, run phase 1. all agentic nano swarm
- errors: none
2026-06-13
- session: 116m | peak ctx: 0% | compacts: 0
- tools: Bash×947, Read×345, Edit×171, StructuredOutput×82, Write×63, TodoWrite×25, ToolSearch×8, Workflow×6, Agent×3, ScheduleWakeup×2, TaskStop×1, PushNotification×1, AskUserQuestion×1
- corrections: rick i have a fun little task for you. I will be giving you the task of going through trending repos on github, scanning them, compare yuri to those, see what we can adopt and rebuild better in yuri u
- errors: none
2026-05-21
- session: 10m | peak ctx: 0% | compacts: 0
- tools: Read×24, Glob×1
- corrections: none
- errors: none
2026-05-20
- Scoped to external/non-YURI surfaces only (v2 re-scoping)
- YURI/Kagami work now exclusively routes to design-master
04 同仓库更多 Skills
zoom-out
Tell the agent to zoom out and give broader context or a higher-level perspective. Use when you're unfamiliar with a section of code or need to understand how it fits into the bigger picture.
yuri-shura
6-perspective adversarial review for high-stakes turns (architecture decisions, refactor planning, deployment review) — fans out architect, adversary (7-vector attack), maintainer, ops, product, and security perspectives in parallel, then consolidates. Use when user says 'review this decision', '/shura', 'adversarial review', 'what could go wrong', 'architecture review', or 'deployment review'.
yuri-sales-intelligence
Unified sales and outreach skill generating cold outreach openers, social selling sequences, objection rebuttals, and ad creative for any paid platform — multi-persona aware, adapting tone and offer frame to buyer type. Use when user says 'write a cold email', 'outreach sequence', 'objection handling', 'ad copy', or 'sales pitch'.
yuri-code-intelligence
Unified code quality intelligence layer that diagnoses code smells (Long Method, Feature Envy, design pattern issues), prescribes targeted Fowler refactoring techniques, and reviews code for security, performance, and clarity. Use when user says 'review this code', 'refactor this', 'what's wrong with this method', 'code smells', or 'clean this up'.
yuri-adw
Invoke when user asks to run the ADW loop / agentic engineering loop / software factory workflow.
writing-skills
Use when creating new skills, editing existing skills, or verifying skills work before deployment