本文へ移動
cccskills
無料GitHub で公開

web-frontend-designer

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

0x-Professor/Agent-Skills-Hub
インストール方法を見る

含まれるファイル（4）

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

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

agentic-mcp-server-builder

無料

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

日本語の概要は準備中です。原文の説明を表示しています。

0x-Professor/Agent-Skills-Hub112026年2月27日 更新

agentic-workflow-automation

無料

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

日本語の概要は準備中です。原文の説明を表示しています。

0x-Professor/Agent-Skills-Hub112026年2月27日 更新

cyber-ir-playbook

無料

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

日本語の概要は準備中です。原文の説明を表示しています。

0x-Professor/Agent-Skills-Hub112026年2月27日 更新

cyber-kev-triage

無料

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

日本語の概要は準備中です。原文の説明を表示しています。

0x-Professor/Agent-Skills-Hub112026年2月27日 更新

cyber-owasp-review

無料

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

日本語の概要は準備中です。原文の説明を表示しています。

0x-Professor/Agent-Skills-Hub112026年2月27日 更新

dl-transformer-finetune

無料

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

日本語の概要は準備中です。原文の説明を表示しています。

0x-Professor/Agent-Skills-Hub112026年2月27日 更新

0x-Professor のスキルをすべて見る

このスキルの問題を報告する