# Frontend

> >

- **Type:** Skill
- **Install:** `agentstack add skill-dojocodinglabs-code-sensei-frontend`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [DojoCodingLabs](https://agentstack.voostack.com/s/dojocodinglabs)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [DojoCodingLabs](https://github.com/DojoCodingLabs)
- **Source:** https://github.com/DojoCodingLabs/code-sensei/tree/main/skills/frontend
- **Website:** https://github.com/DojoCodingLabs/code-sensei

## Install

```sh
agentstack add skill-dojocodinglabs-code-sensei-frontend
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Frontend Development — CodeSensei Teaching Module

## React
- **Analogy:** React lets you build a webpage out of LEGO bricks. Each brick (component) is a self-contained piece that knows how to display itself. You snap them together to build the full page.
- **Key insight:** Instead of one giant HTML file, React breaks the page into small, reusable pieces. A "Navbar" component, a "Card" component, a "Button" component — each one independent.

## Components
- **Analogy:** A component is like a custom sticker. You design it once (define the component), then stick it anywhere on the page as many times as you want.
- **Teaching flow:**
  1. A component is a function that returns HTML-like code (JSX)
  2. Components can receive data through "props" (like settings or configuration)
  3. Components can have their own memory through "state"
- **Quiz:** "If we have a 'UserCard' component, how many times can we use it on a page?"

## Props
- **Analogy:** Props are like the settings on a TV remote. The TV (component) is always the same, but you can change the channel, volume, and brightness (props) to customize what you see.
- `` — the component receives name and role as props
- **Key insight:** Props flow DOWN. A parent component passes data to its children, not the other way around.

## State (useState)
- **Analogy:** State is the component's personal notebook. It remembers things that can change — like whether a menu is open, what the user typed, or how many items are in a cart.
- **Key insight:** When state changes, React automatically re-draws that part of the page. You don't have to manually update the HTML — just change the state and React handles the rest.
- **Quiz:** "If a counter starts at 0 and the user clicks '+' three times, what should the state be?"

## useEffect
- **Analogy:** A "when this happens, do that" instruction. Like setting an alarm — when the component first appears, go fetch the latest data from the server.
- **Key insight:** Effects run AFTER the component displays. They're for side effects — things that happen outside the component itself, like loading data or starting a timer.

## JSX
- **Key insight:** JSX looks like HTML but it's actually JavaScript in disguise. That's why you can put `{variables}` inside it — it's mixing code with layout.
- **Common confusion:** `className` instead of `class`, `onClick` instead of `onclick` — small differences from regular HTML.

## File Structure Patterns
```
src/
├── components/     ← Reusable LEGO bricks
│   ├── Navbar.jsx
│   └── Card.jsx
├── pages/          ← Full pages built from components
│   ├── Home.jsx
│   └── About.jsx
├── App.jsx         ← The main container that holds everything
└── index.jsx       ← The starting point (plugs React into the HTML)
```

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [DojoCodingLabs](https://github.com/DojoCodingLabs)
- **Source:** [DojoCodingLabs/code-sensei](https://github.com/DojoCodingLabs/code-sensei)
- **License:** MIT
- **Homepage:** https://github.com/DojoCodingLabs/code-sensei

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-dojocodinglabs-code-sensei-frontend
- Seller: https://agentstack.voostack.com/s/dojocodinglabs
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.