Frontend design
Agentic personal OS to automate high-leverage workflows with Codex, Claude Code, Pi, OpenClaw and other coding agents/ runtime platforms.
npx -y skills add itseffi/agentic-os --skill frontend-designAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
What its author says it does
Copied from the file, not written here
Design implementation-ready frontend solutions with UX intent, component structure, responsive behavior, accessibility, and handoff criteria.
SKILL.md
1.8 KB, 358 tokens by cl100k_base, as published. Nobody here has run it
Frontend Design
Use this skill to design frontend behavior and UI structure before or alongside implementation.
The Process
Step 1: Define UX objective
Capture:
- user goal
- primary user flow
- success state and failure states
Step 2: Specify UI architecture
Define:
- screen/layout structure
- component hierarchy
- state model (loading, empty, error, success)
Step 3: Specify design system decisions
Set:
- typography and spacing rules
- color/contrast constraints
- interaction patterns
Step 4: Specify responsive and accessibility requirements
Include:
- breakpoints and behavior changes
- keyboard navigation expectations
- ARIA/semantic requirements
- contrast and focus visibility requirements
Step 5: Define implementation handoff
Provide:
- component list and props/state contract
- acceptance criteria
- verification checklist
Output Format
# [Feature Name] Frontend Design Spec
## UX Objective
- User goal:
- Primary flow:
- Success/failure states:
## UI Architecture
- Layout:
- Component hierarchy:
- State model:
## Responsive Behavior
- Desktop:
- Tablet:
- Mobile:
## Accessibility Requirements
- Keyboard:
- Semantics/ARIA:
- Contrast/focus:
## Handoff
- Components to implement:
- Acceptance criteria:
- Verification checklist:
Quality Bar
- Design decisions must map to user goals
- Accessibility section is mandatory
- Handoff must be implementable without extra interpretation
When to Use
Use this skill when the task directly matches the workflow described above.
When Not to Use
Do not use this skill when the request is unrelated, low-stakes, or better handled by a simpler direct response.
What ships with it: 1 file
220 B alongside SKILL.md
agents/
- openai.yaml220 B
Gives 0 of the 12 instructions most design frontend skills give in 358 tokens
Counted across 1,169 of the 1,878 authors here whose files we hold, read 2026-08-07
- Use CSS variables for color consistencyin 72 of 1169, across 23 files
- Commit to one bold aesthetic direction before codingin 72 of 1169, across 27 files
- Match implementation complexity to the aesthetic visionin 70 of 1169, across 20 files
- Add atmospheric background effects and texturesin 57 of 1169, across 9 files
- Use unexpected spatial compositions and layoutsin 56 of 1169, across 8 files
- Implement real working codein 55 of 1169, across 7 files
- Vary themes and aesthetics across different designsin 48 of 1169, across 7 files
- Launch chromium in headless modein 47 of 1169, across 4 files
- Close the browser when donein 47 of 1169, across 4 files
- Run provided scripts with help flag firstin 47 of 1169, across 4 files
- Wait for network idle statein 47 of 1169, across 4 files
- Use descriptive selectors for elementsin 47 of 1169, across 4 files
Said here and by no other author read
- specify the layout and component hierarchy
- define the state model
- set typography, spacing, and color rules
- specify keyboard, ARIA, and contrast requirements
- provide a component list and props contract
- provide acceptance criteria
Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.