skills.rest
Stratio
StratioOFFICIAL
Explore all skills by this author →
Website𝕏@StratioBDGitHub

web-craft

Translate briefs into React or Vue web frontend components.

4|10|Updated Feb 20, 2026
Search Tags:#design#frontend#react#components#vue#web
One-click install
npx skills add https://github.com/Stratio/genai-agents --skill web-craft
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-craft
Source: https://github.com/Stratio/genai-agents/tree/main/shared-skills/web-craft
Command: npx skills add https://github.com/Stratio/genai-agents --skill web-craft

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Builds production-grade interactive web frontends (HTML/CSS/JS, React, Vue) with deliberate aesthetic direction, avoiding generic defaults.

Core Features & Use Cases

  • Translates user briefs into runnable code: HTML, CSS, JavaScript, and framework components (React or Vue) when needed.
  • Applies a five-decision design process (artifact class, tone, type pairing, palette, rhythm) to ensure a coherent visual outcome.
  • Outputs CSS with custom properties, modular typography, motion budgets, and theme-aware tokens suitable for production projects.
  • Generates artifacts for components, pages, landing, or dashboards that respond to user interaction and align with a chosen design system.

Quick Start

Provide a brief describing the desired web artifact and the skill will generate production-ready frontend code tailored to the brief.

Frequently Asked Questions about web-craft

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

FAQPage Schema
How do I generate production-grade React or Vue components from a design brief?▼

To generate production-grade web frontends from a brief, provide a description of the desired artifact and the tool outputs runnable React or Vue component code, HTML, CSS, and JavaScript tailored to your specifications. It applies a five-decision design process to ensure a coherent visual outcome.

Can I build a web dashboard with custom design tokens and modular typography?▼

Yes, you can build a web dashboard with custom design tokens. The skill outputs CSS with custom properties, modular typography, motion budgets, and theme-aware tokens suitable for production projects, ensuring the dashboard responds to user interaction and aligns with a chosen design system.

What is the best way to avoid generic defaults when creating web UIs?▼

The best way to avoid generic defaults when creating web UIs is to apply a deliberate aesthetic direction. This skill enforces a five-decision design process covering artifact class, tone, type pairing, palette, and rhythm, alongside a visual-craftsmanship checklist to guarantee quality and coherent visual outcomes.

Does this tool work with both React and Vue for frontend development?▼

Yes, this tool works with both React and Vue for frontend development. It translates user briefs into runnable code, outputting framework components in React or Vue as requested, alongside standard HTML, CSS, and JavaScript for browser contexts.

How do I translate a landing page concept into runnable frontend code?▼

To translate a landing page concept into runnable frontend code, provide a brief describing the desired web artifact. The skill generates production-ready HTML, CSS, and JavaScript, or React and Vue components, applying chosen tone, palette, and motion budgets to the output.

Related Skills

Explore More Design & Creative Skills→
KangJiSseokKangJiSseok

code-review-intent

Draft design intent documents from briefs and code diffs.

Community
Advanced
damntreckydamntrecky
1

webawesome

Provide over 50 accessible web components for React, Vue, Angular, and Svelte.

Community
Basic
sarimofficialsarimofficial

Dockerfile Generator

Generate multi-stage Dockerfiles for Next.js frontends and FastAPI backends.

Community
Intermediate
zzafergokzzafergok
1

markdown-to-html-skill

Convert Markdown documents to HTML using marked.js, pandoc, gomarkdown, or static site generators.

Community
Intermediate