Skip to content
cccskills
FreePublished on GitHub

web-frontend-designer

Scaffold frontend architecture, components, routing, and UI dependencies from project config and wireframes.

The English summary is being prepared. Showing the original description.

See how to install

Files included (4)

  • SKILL.md1.9 KB
  • agents/openai.yaml333 B
  • references/tools.md948 B
  • scripts/frontend_designer.py10.0 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Web Frontend Designer

Objective

Scaffold a production-ready frontend foundation from project-config.json and wireframes.md, including component structure, dependencies, and route shells.

Required Workflow

  1. Read project-config.json and wireframes.md.
  2. Scaffold the chosen framework (for example create-next-app or Vite scaffolding pattern).
  3. Configure the chosen CSS/design system (Tailwind, Shadcn/ui, Chakra UI, Material UI, Ant Design, Mantine, DaisyUI, or vanilla CSS).
  4. Integrate or plan integration for:
  5. Set up font strategy with Google Fonts or Fontsource.
  6. Set image/illustration sources with Unsplash API, Pexels, or Lummi.
  7. Generate component tree (components, layouts, pages or app) and route placeholders for the sitemap.
  8. Enforce responsive design, dark mode, and accessibility (including ARIA labels).
  9. Output scaffold files and frontend-report.json.

Execution

python skills/web-frontend-designer/scripts/frontend_designer.py --input <workspace> --output <out.json> --format json

References

  • references/tools.md

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Scaffold MCP server projects and baseline tool contract checks. Use for defining tool schemas, generating starter server layouts, and validating MCP-ready structure.

The English summary is being prepared. Showing the original description.

0x-Professor/Agent-Skills-Hub11Updated Feb 27, 2026

Generate reusable multi-step agent workflow blueprints. Use for trigger/action orchestration, deterministic workflow definitions, and automation handoff artifacts.

The English summary is being prepared. Showing the original description.

0x-Professor/Agent-Skills-Hub11Updated Feb 27, 2026

Build incident response timelines and report packs from event logs. Use for detection-to-recovery reporting, phase tracking, and stakeholder-ready incident summaries.

The English summary is being prepared. Showing the original description.

0x-Professor/Agent-Skills-Hub11Updated Feb 27, 2026

Prioritize vulnerability remediation using KEV-style exploitation context plus asset criticality. Use for CVE triage, patch order decisions, and remediation reporting.

The English summary is being prepared. Showing the original description.

0x-Professor/Agent-Skills-Hub11Updated Feb 27, 2026

Map application security findings to OWASP Top 10 categories and generate remediation checklists. Use for normalized AppSec review outputs and category-level prioritization.

The English summary is being prepared. Showing the original description.

0x-Professor/Agent-Skills-Hub11Updated Feb 27, 2026

Build transformer fine-tuning run plans with task settings, hyperparameters, and model-card outputs. Use for repeatable Hugging Face or PyTorch finetuning workflows.

The English summary is being prepared. Showing the original description.

0x-Professor/Agent-Skills-Hub11Updated Feb 27, 2026

See all skills by 0x-Professor

Report a problem with this skill