ui-software-engineer
Guides UI software engineering—implementing screens and components from design specs, design tokens, responsive layout, interaction states, forms, and API-boundary loading/error UI in React/Next.js or similar stacks. Covers component library usage, basic WCAG implementation, and visual QA—not for senior front-end architecture or Core Web Vitals programs (senior-frontend-software-engineer), web auth/CORS/session security (web-application-developer), UX discovery without code (product-designer), interaction specs and coded prototypes (ux-software-engineer), or backend APIs and schemas (fullstack-software-engineer).
How do I install this agent skill?
npx skills add https://github.com/daemon-blockint-tech/agentic-enteprises-skill --skill ui-software-engineerIs this agent skill safe to install?
- Gen Agent Trust Hubpass
The 'ui-software-engineer' skill is a collection of instructional guidelines for frontend engineering tasks. It contains no executable code or remote dependencies and is entirely safe for use.
- Socketpass
No alerts
- Snykpass
Risk: LOW · No issues
What does this agent skill do?
UI Software Engineer
When to Use
- Implement screens and components from Figma or design specs
- Apply design tokens (color, type, spacing) and design-system primitives
- Build states: default, hover, focus, disabled, loading, empty, error
- Wire read-only or form UI to existing APIs (loading, success, validation display)
- Fix layout and responsive breakpoints per spec
- Add basic accessibility: labels, focus order, keyboard activation
- Create Storybook (or equivalent) stories for components
- Run visual QA against design before PR
When NOT to Use
- Front-end architecture, RSC strategy, bundle/CWV optimization →
senior-frontend-software-engineer - Login, cookies, CSRF, CORS, CSP →
web-application-developer - Wireframes, user research, design critique only →
product-designer - Flow specs, heuristic audits, prototypes before visual build →
ux-software-engineer - New REST API, database, or full vertical feature →
fullstack-software-engineer - Deploy pipelines →
devops
Related skills
| Need | Skill |
|---|---|
| Senior FE review, performance, complex arch | senior-frontend-software-engineer |
| Browser security and session flows | web-application-developer |
| Design specs and flows | product-designer |
| Interaction specs and UX validation | ux-software-engineer |
| API + persistence + UI slice | fullstack-software-engineer |
Core Workflows
1. Design handoff to code
Spec checklist, tokens, assets, unknowns.
See references/design_handoff.md.
2. Components and states
Presentational vs container, variants, composition.
See references/components_and_states.md.
3. Layout and tokens
Grid, spacing, typography, responsive rules.
See references/layout_tokens.md.
4. API boundary in UI
Fetch hooks, skeletons, errors, empty states.
See references/ui_data_states.md.
5. Accessibility basics
Labels, contrast, keyboard, focus visible.
See references/ui_a11y_basics.md.
6. Stories and visual QA
Storybook, screenshot compare, PR checklist.
See references/stories_visual_qa.md.
Output standards
- Match design tokens — no magic hex outside token map
- Every interactive control has visible focus and accessible name
- Loading / empty / error implemented for async views
- PR includes screenshots or Storybook link for changed UI
- Escalate spec gaps to
product-designerbefore guessing layout
When to load references
- Handoff →
references/design_handoff.md - Components →
references/components_and_states.md - Layout →
references/layout_tokens.md - Data UI →
references/ui_data_states.md - A11y →
references/ui_a11y_basics.md - QA →
references/stories_visual_qa.md
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/daemon-blockint-tech/agentic-enteprises-skill/ui-software-engineer">View ui-software-engineer on skillZs</a>