# yohanesvito/my-claude-skills architecture

> Architecture diagram of the GitHub repository yohanesvito/my-claude-skills, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/yohanesvito/my-claude-skills
- Repository: https://github.com/yohanesvito/my-claude-skills

## Overview

1. **Repository purpose**
   - This repo is a **Claude Code skills pack**, not a normal application codebase.
   - It contains two independent skills that guide an AI agent through repeatable workflows:
     - `new-hackathon-project` for scaffolding a Web3 hackathon setup.
     - `web-design-style` for applying specific non-mainstream UI aesthetics.

2. **Top-level architecture**
   - The root is mostly **documentation and skill metadata**, with behavior split into the two skill folders.
   - `README.md` explains what each skill does, how to install it into Claude’s skills directory, and how to invoke it.
   - `REFERENCES.md` acts as a pointer layer to external repos or patterns that the skills may reuse or emulate.

3. **Skill boundary: `new-hackathon-project`**
   - This skill is the more “system-like” part of the repo.
   - It is intended to orchestrate creation of a **hackathon project structure** across multiple repos: typically **sc**, **be**, and **fe** under a GitHub organization.
   - The skill is about **project bootstrapping**, not runtime behavior of an app.

4. **Template subsystem inside `new-hackathon-project`**
   - `templates/` holds the concrete scaffolding assets used by the skill.
   - `chains.json` is a chain/network configuration source, likely used to parameterize Web3 deployments and frontend connectivity.
   - This is the main data input for generating chain-aware project defaults.

5. **Frontend template boundary**
   - `templates/fe/` contains the frontend starter configuration.
   - `providers.tsx` and `wagmi.ts` indicate the frontend is meant for **React/Next.js** with **wagmi** for wallet/blockchain integration.
   - `env.example` defines required environment variables, and `vercel.json` suggests deployment targeting **Vercel**.
   - This template is the integration point between chain config, wallet/provider setup, and deployment environment.

6. **Smart contract template boundary**
   - `templates/sc/` contains the smart contract scaffolding.
   - `foundry.toml` shows the contract side is built around **Foundry**.
   - `export-abi.sh` indicates a post-build/export step for sharing contract ABIs with downstream consumers, usually the frontend or backend.
   - `env.example` suggests contract tooling depends on environment-specific secrets or RPC config.

7. **Cross-cutting data flow in the hackathon workflow**
   - The likely flow is: user asks for a new project → the skill reads the templates and chain list → it generates a GitHub org plus repo scaffold → each repo gets its own environment and tooling defaults.
   - The contract repo produces ABIs; the frontend consumes chain settings, provider setup, and ABIs to connect to deployed contracts.
   - The backend repo is referenced in the README but not present as a template here, so its shape is external to this repo.

8. **Skill boundary: `web-design-style`**
   - This skill is separate from the hackathon scaffold and focuses on **visual style transformation**.
   - It contains one `SKILL.md` plus a `styles/` library of style-specific guides.
   - The styles are intentionally opinionated and non-standard: `awwwards-motion`, `grunge`, `neo-brutalism`, and `retro-90s`.

9. **How the style subsystem works**
   - Each style file is a declarative prompt/guide artifact rather than executable code.
   - The skill likely acts as a **design constraint layer**: it tells Claude how to restyle an existing frontend while preserving the underlying product structure.
   - The `styles/` folder is the main content source; `SKILL.md` is the entrypoint and routing layer.

10. **Repository-level pattern**
   - Overall, this repo is a **prompt-driven toolkit** with two kinds of assets:
     - procedural scaffolding assets for generating project structure,
     - aesthetic/style guides for transforming frontend presentation.
   - There is no application runtime, database, or API server in this repo itself; the outputs are meant to be generated elsewhere.

11. **Important architectural takeaway for diagramming**
   - Draw this repo as a **skills hub** feeding Claude Code:
     - root docs and references at the top,
     - two isolated skill modules underneath,
     - template/config assets as inputs to generation,
     - external generated repos/services as outputs.
   - The strongest concrete dependencies are Web3 tooling on the scaffold side: **Foundry**, **wagmi/Next.js**, **Vercel**, and **GitHub org/repo creation**.

Main entry points: [`new-hackathon-project/SKILL.md`](https://github.com/yohanesvito/my-claude-skills/blob/main/new-hackathon-project/SKILL.md) (Hackathon skill), [`new-hackathon-project/templates/fe`](https://github.com/yohanesvito/my-claude-skills/tree/main/new-hackathon-project/templates/fe) (FE template), [`new-hackathon-project/templates/sc`](https://github.com/yohanesvito/my-claude-skills/tree/main/new-hackathon-project/templates/sc) (SC template), [`web-design-style/SKILL.md`](https://github.com/yohanesvito/my-claude-skills/blob/main/web-design-style/SKILL.md) (Design skill)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_root["Root docs"]
  node_readme["README<br/>root doc<br/>[README.md]"]
  node_references["References<br/>pointer doc<br/>[REFERENCES.md]"]
end

subgraph group_hackathon["new-hackathon-project"]
  node_skill_hackathon["Hackathon skill<br/>skill entrypoint<br/>[SKILL.md]"]
  node_chains["Chains config<br/>network data<br/>[chains.json]"]
  node_fe_template["FE template<br/>frontend scaffold"]
  node_providers["Providers<br/>react wallet setup<br/>[providers.tsx]"]
  node_wagmi["Wagmi config<br/>chain client setup<br/>[wagmi.ts]"]
  node_fe_env["FE env<br/>env template<br/>[env.example]"]
  node_vercel["Vercel deploy<br/>deployment config<br/>[vercel.json]"]
  node_sc_template["SC template<br/>contract scaffold"]
  node_foundry["Foundry config<br/>contract build config<br/>[foundry.toml]"]
  node_abi_export["ABI export<br/>artifact step<br/>[export-abi.sh]"]
  node_sc_env["SC env<br/>env template<br/>[env.example]"]
  node_generated_org(("Generated org<br/>external output"))
  node_generated_be["Backend repo<br/>external output"]
end

subgraph group_design["web-design-style"]
  node_skill_design["Design skill<br/>skill entrypoint<br/>[SKILL.md]"]
  node_awwwards["Motion style<br/>style guide<br/>[awwwards-motion.md]"]
  node_grunge["Grunge style<br/>style guide<br/>[grunge.md]"]
  node_brutalism["Brutalism style<br/>style guide<br/>[neo-brutalism.md]"]
  node_retro90s["Retro 90s<br/>style guide<br/>[retro-90s.md]"]
end

node_readme -->|"describes"| node_skill_hackathon
node_readme -->|"describes"| node_skill_design
node_readme -->|"points to"| node_references
node_skill_hackathon -->|"uses"| node_chains
node_skill_hackathon -->|"generates"| node_fe_template
node_skill_hackathon -->|"generates"| node_sc_template
node_skill_hackathon -->|"creates"| node_generated_org
node_skill_hackathon -.->|"references"| node_generated_be
node_fe_template -->|"contains"| node_providers
node_fe_template -->|"contains"| node_wagmi
node_fe_template -->|"contains"| node_fe_env
node_fe_template -->|"contains"| node_vercel
node_fe_template -->|"consumes"| node_chains
node_sc_template -->|"contains"| node_foundry
node_sc_template -->|"contains"| node_abi_export
node_sc_template -->|"contains"| node_sc_env
node_sc_template -.->|"supplies"| node_generated_be
node_abi_export -->|"feeds"| node_generated_be
node_skill_design -->|"routes to"| node_awwwards
node_skill_design -->|"routes to"| node_grunge
node_skill_design -->|"routes to"| node_brutalism
node_skill_design -->|"routes to"| node_retro90s

click node_readme "https://github.com/yohanesvito/my-claude-skills/blob/main/README.md"
click node_references "https://github.com/yohanesvito/my-claude-skills/blob/main/REFERENCES.md"
click node_skill_hackathon "https://github.com/yohanesvito/my-claude-skills/blob/main/new-hackathon-project/SKILL.md"
click node_chains "https://github.com/yohanesvito/my-claude-skills/blob/main/new-hackathon-project/templates/chains.json"
click node_fe_template "https://github.com/yohanesvito/my-claude-skills/tree/main/new-hackathon-project/templates/fe"
click node_providers "https://github.com/yohanesvito/my-claude-skills/blob/main/new-hackathon-project/templates/fe/providers.tsx"
click node_wagmi "https://github.com/yohanesvito/my-claude-skills/blob/main/new-hackathon-project/templates/fe/wagmi.ts"
click node_fe_env "https://github.com/yohanesvito/my-claude-skills/blob/main/new-hackathon-project/templates/fe/env.example"
click node_vercel "https://github.com/yohanesvito/my-claude-skills/blob/main/new-hackathon-project/templates/fe/vercel.json"
click node_sc_template "https://github.com/yohanesvito/my-claude-skills/tree/main/new-hackathon-project/templates/sc"
click node_foundry "https://github.com/yohanesvito/my-claude-skills/blob/main/new-hackathon-project/templates/sc/foundry.toml"
click node_abi_export "https://github.com/yohanesvito/my-claude-skills/blob/main/new-hackathon-project/templates/sc/export-abi.sh"
click node_sc_env "https://github.com/yohanesvito/my-claude-skills/blob/main/new-hackathon-project/templates/sc/env.example"
click node_skill_design "https://github.com/yohanesvito/my-claude-skills/blob/main/web-design-style/SKILL.md"
click node_awwwards "https://github.com/yohanesvito/my-claude-skills/blob/main/web-design-style/styles/awwwards-motion.md"
click node_grunge "https://github.com/yohanesvito/my-claude-skills/blob/main/web-design-style/styles/grunge.md"
click node_brutalism "https://github.com/yohanesvito/my-claude-skills/blob/main/web-design-style/styles/neo-brutalism.md"
click node_retro90s "https://github.com/yohanesvito/my-claude-skills/blob/main/web-design-style/styles/retro-90s.md"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_readme,node_references toneBlue
class node_skill_hackathon,node_chains,node_fe_template,node_providers,node_wagmi,node_fe_env,node_vercel,node_sc_template,node_foundry,node_abi_export,node_sc_env,node_generated_org,node_generated_be toneAmber
class node_skill_design,node_awwwards,node_grunge,node_brutalism,node_retro90s toneMint
```

## Components

### Root docs

Repository overview and reference layer

- [README](https://github.com/yohanesvito/my-claude-skills/blob/main/README.md): root doc · Explains the repo purpose, setup, and skill usage · `README.md`
- [References](https://github.com/yohanesvito/my-claude-skills/blob/main/REFERENCES.md): pointer doc · External patterns and source links used by the skills · `REFERENCES.md`

### new-hackathon-project

Web3 hackathon scaffolding skill and templates

- [Hackathon skill](https://github.com/yohanesvito/my-claude-skills/blob/main/new-hackathon-project/SKILL.md): skill entrypoint · Orchestrates new Web3 project scaffolding · `new-hackathon-project/SKILL.md`
- [Chains config](https://github.com/yohanesvito/my-claude-skills/blob/main/new-hackathon-project/templates/chains.json): network data · Chain and network definitions used to parameterize generated projects · `new-hackathon-project/templates/chains.json`
- [FE template](https://github.com/yohanesvito/my-claude-skills/tree/main/new-hackathon-project/templates/fe): frontend scaffold · Frontend starter assets for wallet and deployment setup · `new-hackathon-project/templates/fe`
- [Providers](https://github.com/yohanesvito/my-claude-skills/blob/main/new-hackathon-project/templates/fe/providers.tsx): react wallet setup · Wallet/provider wiring for the frontend runtime · `new-hackathon-project/templates/fe/providers.tsx`
- [Wagmi config](https://github.com/yohanesvito/my-claude-skills/blob/main/new-hackathon-project/templates/fe/wagmi.ts): chain client setup · Frontend blockchain client and chain integration config · `new-hackathon-project/templates/fe/wagmi.ts`
- [FE env](https://github.com/yohanesvito/my-claude-skills/blob/main/new-hackathon-project/templates/fe/env.example): env template · Required frontend environment variables · `new-hackathon-project/templates/fe/env.example`
- [Vercel deploy](https://github.com/yohanesvito/my-claude-skills/blob/main/new-hackathon-project/templates/fe/vercel.json): deployment config · Frontend deployment target configuration · `new-hackathon-project/templates/fe/vercel.json`
- [SC template](https://github.com/yohanesvito/my-claude-skills/tree/main/new-hackathon-project/templates/sc): contract scaffold · Smart contract project starter assets · `new-hackathon-project/templates/sc`
- [Foundry config](https://github.com/yohanesvito/my-claude-skills/blob/main/new-hackathon-project/templates/sc/foundry.toml): contract build config · Foundry-based contract tooling and build settings · `new-hackathon-project/templates/sc/foundry.toml`
- [ABI export](https://github.com/yohanesvito/my-claude-skills/blob/main/new-hackathon-project/templates/sc/export-abi.sh): artifact step · Exports contract ABIs for downstream consumers · `new-hackathon-project/templates/sc/export-abi.sh`
- [SC env](https://github.com/yohanesvito/my-claude-skills/blob/main/new-hackathon-project/templates/sc/env.example): env template · Contract-side environment and secret template · `new-hackathon-project/templates/sc/env.example`
- **Generated org**: external output · GitHub organization and repos created by the skill
- **Backend repo**: external output · Referenced downstream service repo created outside this package

### web-design-style

Aesthetic transformation skill and style guides

- [Design skill](https://github.com/yohanesvito/my-claude-skills/blob/main/web-design-style/SKILL.md): skill entrypoint · Routes prompts into non-mainstream visual style guides · `web-design-style/SKILL.md`
- [Motion style](https://github.com/yohanesvito/my-claude-skills/blob/main/web-design-style/styles/awwwards-motion.md): style guide · Awwwards-inspired motion and visual treatment guidance · `web-design-style/styles/awwwards-motion.md`
- [Grunge style](https://github.com/yohanesvito/my-claude-skills/blob/main/web-design-style/styles/grunge.md): style guide · Rough, distressed aesthetic direction · `web-design-style/styles/grunge.md`
- [Brutalism style](https://github.com/yohanesvito/my-claude-skills/blob/main/web-design-style/styles/neo-brutalism.md): style guide · Neo-brutalist composition and layout guidance · `web-design-style/styles/neo-brutalism.md`
- [Retro 90s](https://github.com/yohanesvito/my-claude-skills/blob/main/web-design-style/styles/retro-90s.md): style guide · Nostalgic 1990s-inspired interface direction · `web-design-style/styles/retro-90s.md`

## Connections

- README → Hackathon skill: describes · README introduces the hackathon skill entrypoint
- README → Design skill: describes · README introduces the design skill entrypoint
- README → References: points to · Root docs include external references and patterns
- Hackathon skill → Chains config: uses · The scaffold reads chain/network definitions
- Hackathon skill → FE template: generates · Creates frontend project structure from templates
- Hackathon skill → SC template: generates · Creates smart contract project structure from templates
- Hackathon skill → Generated org: creates · Produces a GitHub organization and repo set
- Hackathon skill → Backend repo: references · Backend repo is part of the intended output but external to this repo
- FE template → Providers: contains · Frontend scaffold includes provider wiring
- FE template → Wagmi config: contains · Frontend scaffold includes wallet/client config
- FE template → FE env: contains · Frontend scaffold includes environment template
- FE template → Vercel deploy: contains · Frontend scaffold includes deployment config
- FE template → Chains config: consumes · Frontend defaults are parameterized by chain config
- SC template → Foundry config: contains · Contract scaffold is built around Foundry
- SC template → ABI export: contains · Contract scaffold includes ABI export step
- SC template → SC env: contains · Contract scaffold includes environment template
- SC template → Backend repo: supplies · Contract artifacts and ABIs flow into downstream repos
- ABI export → Backend repo: feeds · Exported ABIs are consumed by downstream services
- Design skill → Motion style: routes to · Skill dispatches into a specific style guide
- Design skill → Grunge style: routes to · Skill dispatches into a specific style guide
- Design skill → Brutalism style: routes to · Skill dispatches into a specific style guide
- Design skill → Retro 90s: routes to · Skill dispatches into a specific style guide