skills.rest
gridi-ai
gridi-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

fe-main

Convert design specs, Figma designs, and OpenAPI specs into frontend code.

1|Updated Mar 24, 2026
Search Tags:#frontend#openapi#figma#api-integration#design-spec
One-click install
npx skills add https://github.com/gridi-ai/gridi-skills --skill fe-main
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fe-main
Source: https://github.com/gridi-ai/gridi-skills/tree/main/skills/fe-main
Command: npx skills add https://github.com/gridi-ai/gridi-skills --skill fe-main

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translates design specs (design-spec.md), Figma designs, and OpenAPI specs into cohesive frontend code, reducing handoffs and rework.

Core Features & Use Cases

  • Generates frontend scaffolding aligned with design tokens, component patterns, and API contracts.
  • Produces UI publishing, component development, and API integration code ready for deployment.
  • Use cases include bootstrapping a Next.js/React app from design specs and wiring API clients to UI components.

Quick Start

Start by initializing a frontend project from design-spec.md and the OpenAPI spec, then implement components and API clients accordingly.

Frequently Asked Questions about fe-main

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

FAQPage Schema
How do I convert Figma designs and OpenAPI specs into frontend code?▼

To convert Figma designs and OpenAPI specs into frontend code, use a Skill that translates design specifications and API contracts into production-ready UI scaffolding, reducing handoffs and manual rework. It generates component patterns and API clients directly.

What is the best way to bootstrap a Next.js app from design specs?▼

The best way to bootstrap a Next.js app from design specs is to initialize the project using a design-spec.md file and an OpenAPI spec. This generates aligned frontend scaffolding, component patterns, and wired API clients ready for deployment.

Do I need a crew-config.json file to generate frontend scaffolding?▼

Yes, a crew-config.json file is required to generate frontend scaffolding. Project configuration via this file is necessary to properly map design tokens, component structures, and API contracts into cohesive frontend code.

Can I use generated API clients for component development in React?▼

Yes, you can use generated API clients for component development in React. The workflow supports wiring these API clients directly to UI components, ensuring seamless API integration across modern frameworks during frontend publishing.

How does design-spec.md translate frontend component patterns?▼

A design-spec.md translates frontend component patterns by providing design tokens and structural guidelines that the Skill uses to generate cohesive UI scaffolding. This ensures the produced frontend code aligns with the intended visual and functional architecture.

What limitations exist when wiring API clients to UI components?▼

Limitations when wiring API clients to UI components include dependencies on accurate OpenAPI specs and proper project configuration via crew-config.json. The Skill requires dedicated scripts, references, and assets resources to successfully execute API integration workflows.

Related Skills

Explore More Software Engineering Skills→
hamzaPixlhamzaPixl
2

crew-init

Generate CLAUDE.md, rule files, and scoped permissions for software repositories.

Community
Intermediate
Angriff36Angriff36

Frontend Implementation

Guide frontend UI development across React, Vue, and Angular projects.

Community
Advanced
takapomtakapom

figma

Extract Figma design data and generate React Native components and design tokens.

Community
Advanced
amhuppertamhuppert
2

break-into-subtasks

Break down frontend feature requirements into API clients, UI components, and integration tasks with dependencies.

Community
Advanced