Implement UI code cleanly while respecting the project's folder boundaries (app/routes, components, lib, services, hooks, store), styling conventions, and state patterns.
SkillScore91Maintained
Automatic
◆Frontend / UI pack
Last verified 8/3/2026
What it changes
Passed 20 of 22 test cases with the skill, and 17 of 22 without it.
Without skill77%
With skill91%
Checks it passed that the model alone missed
Avoids outputting alternative styling fallbacks.
Places the custom scroll hook inside the /hooks directory.
Places the API fetch service inside the /services directory.
and 2 more in the full report
3 fixed17 passed either way2 still failing0 broke
Pass-rate lift
+14 pp
Tokens
+19%
Agent turns
0%
Response time
-40%
Model gemini-3.6-flashMeasured 8/3/2026v120 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 3 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 3
Prompt
We need a reusable custom hook to monitor window scroll behavior along with a floating 'back to top' button UI component. Please implement both the hook and the button component with styling that follows our project patterns.
What was checked, without and with the skill
Checked
Without skill
With skill
Places the custom scroll hook inside the /hooks directory.
Missed
Passed
Places the floating button UI component inside the /components directory.
Missed
Passed
Avoids outputting alternative styling fallbacks.
Missed
Passed
case-01 · gemini-3.6-flash · 8/3/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md75 linessingle file
Write Front-End Code Skill
Purpose
Write front-end code that is clean, correctly placed, consistent with project conventions, and free of unnecessary complexity, duplication, or boundary violations.
When to Use
Implementing UI logic, components, hooks, or styles for a planned feature.
Editing existing front-end code to add or change behavior.
Any task that produces or modifies .tsx/.jsx/.ts/.js/style files in the front-end layers.
When Not to Use
Pure backend/database work with no front-end code involved (see Database and Backend Logic Skill).
Page/route composition specifically when the work is primarily about assembling existing components into a screen (see Assemble Page or Screen Skill) — though this skill's rules still apply to any code written there.
Required Inputs
The plan or task description (from Plan the Feature Skill if applicable).
Project conventions from Understand the Project Skill (framework, folder structure, styling, state).
Existing related components/hooks/services to extend or follow as patterns.
Assumptions
Existing project structure and conventions take precedence over the default rule of thumb.
Code should preserve existing behavior unless the task asks for a behavior change.
Step-by-Step Workflow
Confirm placement: determine the correct file/folder for this code based on responsibility:
Check for existing code to reuse or extend before writing new code (components, hooks, utilities, types).
Write the implementation:
Keep functions and components focused on one responsibility.
Use clear, descriptive names — avoid data, temp, stuff, helper, newThing unless context makes them unambiguous.
Keep nesting shallow; extract logic into named functions/hooks when it improves clarity.
Avoid duplicating logic that already exists elsewhere — extract shared logic only if reuse is real.
Apply styling per project convention (CSS Modules, Tailwind, etc.); keep component styles co-located with the component, not in route files or scattered globals.
Apply state per convention: local state first, then shared/global only if truly needed (see Manage State Skill).