Figma Pencil Fsd Tailwind4
by aiskillstore · development · go, shell, react, node, skill
Convert Figma or Pencil designs into production-ready frontend code using Feature-Sliced Design and Tailwind CSS v4. Use when translating designs into code, extracting tokens, mapping UI to FSD layers (shared / entities / features / widgets / pages / app-shell / app), enforcing Server vs Client boundaries when applicable, or validating design-to-code fidelity.
Source: https://github.com/aiskillstore/marketplace
Install
git clone https://github.com/aiskillstore/marketplaceTags: go, shell, react, node, skill
⭐ 334 GitHub stars · Source: skillsdirectory
About development MCP servers and Claude skills
development MCP servers extend what AI agents can do inside Claude Code, Cursor, Copilot, Codex, and Windsurf. The Skiln directory indexes 16,000+ such integrations across 22 categories.
Figma Pencil Fsd Tailwind4 is one of hundreds of development entries indexed on Skiln. Browse the full development category or the complete directory of Claude skills, MCP servers, agents, commands, and hooks.
Related development MCPs and skills
- Dialogic Teaching Move Generator by gabrielmoreira
Generate follow-up teaching moves that extend student thinking after a specific classroom response. Use when a student says something worth exploring and the teacher wants to deepen the dialogue.
- Ladder Of Inference Reflection by gabrielmoreira
Slow down interpretation from observation to action. Use when students or adults need to examine assumptions in conflict, dialogue, or inquiry.
- Agency Scaffold Generator by gabrielmoreira
Generate scaffolds that gradually increase student choice, voice, and ownership within a learning task. Use when students depend heavily on teacher direction and need to develop autonomy.
- Awe Wonder Experience Designer by gabrielmoreira
Design a moment of awe or wonder that hooks curiosity and deepens emotional engagement with content. Use when opening units, introducing surprising material, or reigniting student interest.
- Belonging Classroom Culture Designer by gabrielmoreira
Design targeted interventions that strengthen belonging and inclusion for specific classroom dynamics. Use when students feel isolated, cliques form, or new students need integrating.
- Motivation Diagnostic Task Redesign by gabrielmoreira
Diagnose motivation problems in a task using self-determination theory and redesign for autonomy, competence, and relatedness. Use when students are disengaged, resistant, or going through the motions.
- Perma Based Lesson Designer by gabrielmoreira
Design a lesson that embeds PERMA wellbeing elements alongside academic learning objectives. Use when planning lessons that intentionally support both content mastery and student flourishing.
- Trauma Informed Practice Designer by gabrielmoreira
Design trauma-informed classroom practices that prioritise safety, predictability, connection, and regulation. Use when student behaviour may be trauma-related or the class needs a sensitive approach.
Frequently asked questions
How do I install Figma Pencil Fsd Tailwind4?
Add the install command above to your Claude Code, Cursor, or Windsurf MCP configuration. Most servers register via npx, a local command, or a Docker image. Refer to the source repository for environment variables and credential requirements.
Which clients support Figma Pencil Fsd Tailwind4?
Any MCP-compatible client works: Claude Desktop, Claude Code CLI, Cursor, Windsurf, Zed, and VS Code with the official MCP extension. OpenAI Codex and GitHub Copilot increasingly support MCP via adapter bridges.
Is Figma Pencil Fsd Tailwind4 free?
The server itself is typically open source. Any upstream service (API keys, paid tiers, hosted infrastructure) may have its own pricing. Check the source repository for details.