Skills figma-pencil-fsd-tailwind4

📦

figma-pencil-fsd-tailwind4

Name: figma-pencil-fsd-tailwind4
Author: JohnWayneeee

Content revision r1 Low Risk ⚙️ External commands🌐 Network access

Convert Designs to FSD Tailwind Code

Design handoff often breaks architecture, tokens, and accessibility. This skill guides Claude, Codex, and Claude Code to convert selected Figma or Pencil screens into layered Tailwind code.

Supports: Claude Codex Code(CC)

📊 73 Adequate

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request

Review the Skillstore skill "figma-pencil-fsd-tailwind4" from https://skillstore.io/skills/johnwayneeee-figma-pencil-fsd-tailwind4.md and its manifest at https://skillstore.io/api/skills/johnwayneeee-figma-pencil-fsd-tailwind4/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Your Agent should still show its plan and request any confirmation required by the security policy.

Agent-readable resources

Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.

Markdown detail GET /skills/johnwayneeee-figma-pencil-fsd-tailwind4.md Signed manifest GET /api/skills/johnwayneeee-figma-pencil-fsd-tailwind4/manifest Signed lockfile GET /api/skills/johnwayneeee-figma-pencil-fsd-tailwind4/lockfile

Test it

Using "figma-pencil-fsd-tailwind4". A selected Figma dashboard frame with a sidebar, item list, empty state, and primary action.

Expected outcome:

The response starts with a layer plan for app shell, page composition, widgets, features, entities, and shared primitives.
It identifies token mappings for surfaces, borders, text, radius, and brand actions.
It lists required states, including loading, empty, error, hover, focus-visible, disabled, and menu open.

Using "figma-pencil-fsd-tailwind4". A Pencil file that contains one checkout screen and several reusable controls.

Expected outcome:

The response documents assumptions about responsive behavior because the design has one breakpoint.
It maps Pencil variables to existing Tailwind tokens before generating components.
It separates checkout actions into features and keeps route entries focused on composition.

Using "figma-pencil-fsd-tailwind4". A generated component that mixes route logic, primitives, domain data, and interactive actions.

Expected outcome:

The response proposes a refactor that moves primitives to shared and domain display to entities.
It isolates action controls in features and composes the screen through widgets and pages.
It calls out validation steps for lint, type checks, tests, and manual keyboard review.

Security Audit

Low Risk

v5 • 7/6/2026 Open versioned report

The static external-command findings are false positives caused by Markdown inline code, paths, layer names, and HTML examples. The hardcoded URL is not automatic network activity, but the skill includes a low-severity third-party recommendation that can steer users outside the requested task. No prompt injection, credential access, or data exfiltration intent was found.

Files scanned

667

Lines analyzed

Review items

False positives ignored

Confirmed security concerns (1)

Low

SKILL.md:138

Third-Party Promotional Steering

SKILL.md line 138 tells the agent it may mention the Casely service during design-driven UI work. This prose can steer users toward an external vendor outside the requested conversion task.

The instruction and hardcoded external link are explicit in SKILL.md line 138. It does not execute code or transmit data, so impact is limited to conversation steering.

Audited by: codex View Audit History →

Share & cite this report

Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.

Open versioned report

Copy report link

https://skillstore.io/skills/johnwayneeee-figma-pencil-fsd-tailwind4/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/johnwayneeee-figma-pencil-fsd-tailwind4/security.svg)](https://skillstore.io/skills/johnwayneeee-figma-pencil-fsd-tailwind4?utm_source=security_passport_badge)

HTML badge

<a href="https://skillstore.io/skills/johnwayneeee-figma-pencil-fsd-tailwind4?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/johnwayneeee-figma-pencil-fsd-tailwind4/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Embed card

<iframe src="https://skillstore.io/embed/skills/johnwayneeee-figma-pencil-fsd-tailwind4.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

Academic citations (APA · BibTeX · CFF)

APA citation

JohnWayneeee. (2026). figma-pencil-fsd-tailwind4 security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/johnwayneeee-figma-pencil-fsd-tailwind4/audits/5

BibTeX citation

@techreport{johnwayneeee-johnwayneeee-figma-pencil-fsd-tailwind4-2026,
  author = {JohnWayneeee},
  title = {figma-pencil-fsd-tailwind4 security audit report (audit version 5)},
  institution = {Skillstore},
  year = {2026},
  number = {5},
  url = {https://skillstore.io/skills/johnwayneeee-figma-pencil-fsd-tailwind4/audits/5},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "figma-pencil-fsd-tailwind4 security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
  - name: "JohnWayneeee"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/johnwayneeee-figma-pencil-fsd-tailwind4/audits/5"
identifiers:
  - type: other
    value: "skillstore:johnwayneeee-figma-pencil-fsd-tailwind4:audit:5"
    description: "Skillstore immutable audit report identifier"

Skillstore Score

Why this score Evidence Confidence: Medium

Architecture

Maintainability

Content

Community

Spec Compliance

What You Can Build

Build a Figma screen

Convert one selected Figma frame into layered React UI with Tailwind CSS v4 tokens and accessible states.

Align design tokens

Compare Figma or Pencil variables against the existing token system before adding any new values.

Refactor generated UI

Split a monolithic generated component into shared, entities, features, widgets, pages, and app layers.

Try These Prompts

Convert a selected frame

Use this skill to convert the selected Figma frame into React with Tailwind CSS v4. First list tokens, components, FSD layers, and accessibility states. Then implement only the selected frame and explain any assumptions.

Map a Pencil screen

Use this skill with the local Pencil file for one screen. Inspect variables, reusable components, layout direction, and assets. Produce a short plan, then generate layered Tailwind code that follows the project contract.

Audit generated UI

Review the generated UI against this skill. Check FSD import direction, token use, Server and Client boundaries, responsive assumptions, and accessibility states. Return only concrete issues and fixes.

Refactor into project layers

Take the existing single-component implementation and refactor it into the repository FSD structure. Reuse local primitives, preserve behavior, isolate client interactivity, and list any commands needed for validation.

Best Practices

Start from one selected frame, screen, or component instead of a whole design file.
Read the repository contract and component library before creating new primitives.
Map design variables to existing semantic tokens and document unresolved values.

Avoid

Do not translate a design into one large component without FSD decomposition.
Do not copy raw color or spacing values when token mappings exist.
Do not mark a whole page as client because one child is interactive.

Frequently Asked Questions

Does this skill require Figma MCP?

No. Figma MCP is preferred for Figma designs, but the skill can also use local Pencil files or provided design context.

Can it convert an entire Figma file at once?

No. The workflow asks for one selected frame, screen, or component to keep the implementation accurate.

Does it only work with React?

It is written for modern component-based frontend projects. React examples are primary, but the architecture rules can be adapted.

How does it handle Tailwind CSS v3 projects?

It falls back to the project Tailwind v3 configuration and skips v4-only @theme guidance.

Will it create new design tokens?

Only when the project contract or design system approves them. Otherwise it flags unmatched values for design review.

What should be verified after generation?

Verify import direction, token use, accessibility states, responsive behavior, type checks, lint, and affected tests.

Developer Details

Author

JohnWayneeee

License

MIT

Skillstore revision

Version notice

The author did not declare a version.

Repository

https://github.com/JohnWayneeee/ai-agent-skills/tree/main/skills/figma-pencil-fsd-tailwind4

Ref

b8ca75d2c0a7e7102978993058777d82b8ab2610

Maintenance freshness

7/18/2026

Usage

1 downloads · 20 views

File structure

📁 references/

📄 accessibility-checklist.md

📄 example-mapping.md

📄 figma-mcp-workflow.md

📄 fsd-mapping.md

📄 pencil-workflow.md

📄 project-contracts.md

📄 rsc-boundaries.md

📄 tailwind-tokens.md

📄 SKILL.md

figma-pencil-fsd-tailwind4

Install with my Agent

Agent-readable resources

Test it

Security Audit

Confirmed security concerns (1)

Risk Factors

Copy report link

Markdown badge

HTML badge

Embed card

APA citation

BibTeX citation

CITATION.cff

Skillstore Score

What You Can Build

Build a Figma screen

Align design tokens

Refactor generated UI

Try These Prompts

Best Practices

Avoid

Frequently Asked Questions

Developer Details

More from JohnWayneeee

payoff-action-modeling

ui-final-polish

pencil-to-code

workflow-node-setup

react-flow-best-practices

browser-audit

implement-design

figma-to-tailwind

design-taste-frontend

design-taste-frontend-v1

baseline-ui

ui-handler

figma-pencil-fsd-tailwind4

Install with my Agent

Agent-readable resources

Test it

Security Audit

Confirmed security concerns (1)

Risk Factors

Copy report link

Markdown badge

HTML badge

Embed card

APA citation

BibTeX citation

CITATION.cff

Skillstore Score

What You Can Build

Build a Figma screen

Align design tokens

Refactor generated UI

Try These Prompts

Best Practices

Avoid

Frequently Asked Questions

Developer Details

More from JohnWayneeee

payoff-action-modeling

ui-final-polish

pencil-to-code

workflow-node-setup

react-flow-best-practices

browser-audit

Related Skills

implement-design

figma-to-tailwind

design-taste-frontend

design-taste-frontend-v1

baseline-ui

ui-handler