state-driven-ui
✓Create React UI as a projection of explicit state transitions using reducer + events. Isolate side effects in React Query mutation callbacks. Keep components render-only and intent-only.
Installation
SKILL.md
Scope Use this skill to design and implement UI behavior as a pure projection of state. Model behavior with reducer + events. Isolate side effects in React Query mutation callbacks.
Required approach Follow this order. Do not skip steps. Do not write component code before steps 1 to 4 are complete.
Output expectations When using this skill, output in this structure:
Create React UI as a projection of explicit state transitions using reducer + events. Isolate side effects in React Query mutation callbacks. Keep components render-only and intent-only. Source: lucascmelo/agent-skills.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/lucascmelo/agent-skills --skill state-driven-ui- Source
- lucascmelo/agent-skills
- Category
- *Creative Media
- Verified
- ✓
- First Seen
- 2026-02-01
- Updated
- 2026-02-18
Quick answers
What is state-driven-ui?
Create React UI as a projection of explicit state transitions using reducer + events. Isolate side effects in React Query mutation callbacks. Keep components render-only and intent-only. Source: lucascmelo/agent-skills.
How do I install state-driven-ui?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/lucascmelo/agent-skills --skill state-driven-ui Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/lucascmelo/agent-skills
Details
- Category
- *Creative Media
- Source
- skills.sh
- First Seen
- 2026-02-01