skills.rest
fixpoint-labs
fixpoint-labsOFFICIAL
Explore all skills by this author →
GitHub

fsd:prototype

Prototype FSD blocks, patterns, capabilities, and UI variants for testing.

2|Updated Feb 16, 2026
Search Tags:#prototyping#UI design#block development#FSD#design testing
One-click install
npx skills add https://github.com/fixpoint-labs/flow-state-dev --skill fsd-prototype
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fsd:prototype
Source: https://github.com/fixpoint-labs/flow-state-dev/tree/main/.agents/skills/prototype
Command: npx skills add https://github.com/fixpoint-labs/flow-state-dev --skill fsd-prototype

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill allows users to quickly prototype and test FSD design concepts, ensuring they work as intended before implementation.

Core Features & Use Cases

  • Block/Pattern/Capability Prototyping: Create throwaway flows to test individual blocks, patterns, or capabilities.
  • UI Variant Generation: Generate multiple UI variants for devtools, kitchen-sink pages, or item-type renderers.
  • Use Case: If you're designing a new block within FSD and want to ensure it interacts correctly with the rest of the system, you can use this Skill to create a prototype flow that allows you to manually push the block through cases and observe the results.

Quick Start

Use the fsd:prototype skill to create a logic prototype for testing a new block.

Frequently Asked Questions about fsd:prototype

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I prototype FSD components to test design concepts before implementation?▼

To prototype FSD components, you can create throwaway flows to test individual blocks, patterns, or capabilities. This allows you to manually push a block through cases and observe results before full implementation.

Can I generate multiple UI variants for FSD devtools and kitchen-sink pages?▼

Yes, you can generate multiple UI variants specifically for devtools, kitchen-sink pages, or item-type renderers. This allows you to test different visual states and interactions within your FSD environment.

What is the best way to test if a new block interacts correctly within an FSD system?▼

The best way to test block interactions is to create a logic prototype flow. This lets you manually push the block through various test cases and observe how it behaves within the broader system.

Do I need a specific environment to run FSD design testing and block prototyping?▼

Yes, FSD design testing requires access to the FSD environment and appropriate runtime tools. It is designed to support both manual and automated testing scenarios within this specific development context.

When should I use throwaway flows for Flow State Development prototyping?▼

You should use throwaway flows when you want to isolate and validate a new block, pattern, or capability. This ensures the design concept works as intended before you commit to final implementation.

Related Skills

Explore More Software Engineering Skills→
filipstrandfilipstrand
2.3k

mflux-dev-env

Set up and maintain the mflux development environment on macOS arm64 with uv and Makefile targets.

Community
Advanced
DiologIRDiologIR

acceptance-e2e

Automate end-to-end UI tests for web applications using Playwright.

Official
Advanced
lxh755818-botlxh755818-bot

node-inspect-debugger

Debug Node.js applications via the Chrome DevTools Protocol.

Community
Intermediate
kvm9-devkvm9-dev

mockup-sandbox

Render web UI mockups live via Vite-powered iframe preview routes.

Community
Advanced