Rylaa Claude Agent Workflows
rylaa-claude-agent-workflows is a Claude Code plugin collection for the Build phase that runs Figma-to-code, Next.js frontend, and structured code-review workflows.
by Rylaa · github.com/Rylaa/claude-agent-workflows
Install Pixelbyte plugins to turn Figma designs into Next.js + shadcn/ui code and run structured frontend code review.
Add it to Claude Code
Install the plugin in Claude Code. One command, paste-ready.
/plugin install rylaa-claude-agent-workflows@Rylaa/claude-agent-workflowsBuilt to be called by your agent
Skillselion is itself an MCP server. Your agent can pull this entry and a paste-ready install config straight from the API - no copy-paste.
Retrieve this entry with skillselion.get_details("plugin:Rylaa/claude-agent-workflows") and the paste-ready config with skillselion.get_install_config("plugin:Rylaa/claude-agent-workflows").
What it does
rylaa-claude-agent-workflows packages the Pixelbyte plugin set for builders who ship polished web UIs with Claude as a senior frontend partner. You choose among three plugins rather than swallowing a monolith—typically a Figma-to-code path, a frontend development accelerator, and a code review workflow aligned with component guidelines and Suspense-ready Next.js patterns. The README positions the bundle for design-to-production loops: extract tokens, generate React TypeScript with Tailwind and shadcn/ui, then validate accessibility and performance. Solo founders validating a landing page or SaaS dashboard benefit most when Figma is the source of truth and they want agent steps that mirror agency-style 5-phase delivery. Complexity sits at intermediate because you must align Figma structure, router conventions, and review expectations. It complements generic coding agents by narrowing scope to visual fidelity and frontend compliance rather than backend or DevOps.
Highlights
- Collection of 3 specialized Claude Code plugins you install à la carte
- Figma-to-code conversion with pixel-perfect and design-token oriented workflows
- Next.js App Router, React TypeScript, Tailwind, and shadcn/ui oriented generation
- 5-phase workflow coverage spanning design extraction through validation
- Accessibility, performance, and visual accuracy checks for senior-level frontend review
Why builders use it
Turning Figma mocks into consistent Next.js and shadcn/ui code with accessibility and review gates is slow without a repeatable multi-step agent workflow.
After installing the relevant Pixelbyte plugins, you get guided design extraction, component generation, and validation passes without rebuilding prompts each sprint.
At a glance
- Type - Plugin in Frontend & UI.
- Adoption - 0 installs, 2 stars, 0 votes.
FAQ
Who is rylaa-claude-agent-workflows for?
Frontend-focused solo builders and pixel-conscious teams converting Figma designs to Next.js with agent-assisted review.
When should I use rylaa-claude-agent-workflows?
Use it during UI build sprints when you have Figma specs and want figmatocode, component generation, and review plugins installed selectively.
How do I add rylaa-claude-agent-workflows to my agent?
Open the Rylaa/claude-agent-workflows repository, install only the Pixelbyte plugins you need into Claude Code, and follow each plugin’s workflow for design extraction, codegen, and review.
Comments
Share how you use rylaa-claude-agent-workflows, gotchas, or tips for other indie builders.
No comments yet - be the first to share how you use it.