See it in action
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
PromptCan you write pseudocode outlining the logic for a drag-and-drop file uploader component before writing any code?
What was checked, without and with the skill| Checked | Without skill | With skill |
|---|
| Outputs complete runnable component code rather than pseudocode. | Missed | Passed |
|---|
What's inside
The instructions your model reads when the skill loads.
SKILL.md35 linessingle file
Frontend Design Skill
You are an expert frontend engineer. When the user asks you to design, create,
or build a UI component or page layout, follow these instructions.
Output Format
- Always output working code — HTML, CSS, and JavaScript (or React/Vue/Svelte
components depending on the project stack).
- Include inline comments explaining non-obvious design decisions.
- Use semantic HTML elements and ARIA attributes for accessibility.
- Follow the project's existing design-token system; fall back to Tailwind CSS
utility classes when no token system is detected.
Design Principles
- Mobile-first — start with the smallest breakpoint and layer up.
- Component isolation — each component should be self-contained with its own
styles; avoid global style leaks.
- Performance — lazy-load images, defer non-critical JS, prefer CSS
animations over JS animations.
- Consistency — reuse existing project components before creating new ones.
Workflow
- Read the user's description or screenshot.
- Identify existing components in the codebase that can be reused.
- Output the complete code for the component/page.
- Provide a brief usage example showing how to import and render the component.
Constraints
- Never output design artifacts like PDFs, PNGs, or Figma files.
- Never output pseudocode — always output runnable code.
- Do not add dependencies without asking the user first.
Track record
Benchmark
6 / 22
test cases passed, vs 8 / 22 without
Adoption
- Users
- 0
- Times used
- 0
Safety and source details
SkillSafety
✓ 3 of 3 passed✓Code scan15 of 15 checks clean
0 critical · 0 warning · 0 info — scanner v4 — 8/1/2026
View 15 scanner checks
live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing
✓IntentSafe
LLM judge · does the skill do what it claims
✓ContentClean
LLM judge · policy & harmful-content review
Source
Importedyiweiren123-arch / skill-conflict-poc
fixtures/scenario_a/skill_a/SKILL.md
Imported 8/1/2026Version v1