yohanesvito/my-claude-skills

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.