Pixelbyte plugin collection for Figma-to-code, frontend development, and code review workflows. Install individual plugins based on your needs.
npx claudepluginhub rylaa/claude-agent-workflowsFigma-to-code conversion with 5-agent pipeline. Validates designs, creates specs, manages assets, generates code, and verifies compliance using Pixelbyte Figma MCP Server.
Senior-level frontend development guidelines for React/TypeScript.
Pixelbyte agent collection: prompt compliance checker, component documentation generator, and more specialized agents for development workflows.
Production-ready workflow orchestration with 79 focused plugins, 184 specialized agents, and 150 skills - optimized for granular installation and minimal token usage
Directory of popular Claude Code extensions including development tools, productivity plugins, and MCP integrations
No description available.
Claude Code plugin collection with modular installation. Install only what you need.
Add the marketplace to your .claude/settings.json:
{
"extraKnownMarketplaces": [
"https://github.com/Rylaa/pixelbyte-agent-workflows"
]
}
Then install individual plugins:
# Install all plugins
claude plugin install pb-figma
claude plugin install pb-frontend
claude plugin install pb-agents
# Or install only what you need
claude plugin install pb-figma # Just Figma-to-code
| Plugin | Description | Category |
|---|---|---|
pb-figma | Figma-to-code conversion with pixel-perfect accuracy | Design |
pb-frontend | Senior-level frontend development guidelines | Development |
pb-agents | Prompt compliance checker and component documentation agents | Quality |
Converts Figma designs to pixel-perfect code for multiple frameworks using a 5-phase workflow with 85%+ accuracy target.
Set up a Figma Personal Access Token:
export FIGMA_PERSONAL_ACCESS_TOKEN="your-token-here"
Get your token: Figma → Settings → Personal Access Tokens
pb-figma supports multiple frontend frameworks with specialized agents:
Framework detection is automatic based on project structure.
| Framework | Agent | Status | Documentation |
|---|---|---|---|
| React + Tailwind | code-generator-react | ✅ Production | Auto-invoked for .tsx/.jsx projects |
| SwiftUI | code-generator-swiftui | ✅ Production | Auto-invoked for .swift projects |
| Vue 3 | code-generator-vue | 🚧 Coming v1.2.0 | Planned |
| Kotlin Compose | code-generator-kotlin | 🚧 Coming v1.2.0 | Planned |
Provide a Figma URL or mention "figma-to-code", "convert Figma", "implement design".
Examples:
Framework is detected automatically based on project file extensions.
Automatically configures pixelbyte-figma-mcp with these tools:
figma_get_file_structure - Get file/node hierarchyfigma_get_node_details - Get detailed node infofigma_generate_code - Generate code from nodefigma_get_design_tokens - Extract design tokensfigma_get_screenshot - Capture visual referencefigma_get_code_connect_map - Get component mappingsSenior-level frontend development guidelines for React/TypeScript applications.
React.FC<Props>useSWR and suspense: trueAutomatically invoked when creating components, pages, or features. Mention "frontend guidelines", "React patterns", or "TypeScript best practices".
Pixelbyte agent collection for specialized development workflows.
prompt-compliance-checker
component-documentation