Level 2 Practice: Read GitHub Issues and Implement the Skills Component

If you want to understand the concepts and mechanics first, see the Level 2 concept guide.

The About page from Level 1 is done. Next I want to add a Skills section. With GitHub MCP configured, Claude can read Issues directly and implement from them.

Who this is for: Anyone who has created CLAUDE.md and wants to connect GitHub Issues with Claude Code.

Estimated time: 10 min read + 30 min hands-on

---

Carrying Over from the Previous Level

CLAUDE.md and src/components/About.tsx are complete from Level 1.

Configure GitHub MCP

Create my-portfolio/.claude/settings.json:

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token_here"
      }
    }
  }
}

Get a GitHub Personal Access Token at github.com/settings/tokens (the repo scope is required). Restart Claude Code and the GitHub tools will be available.

Create the GitHub Issue

Create the following Issue in the my-portfolio repository:

Title: Add a Skills section

Body:
## Requirements
- Display programming languages, frameworks, and tools organized by category
- Show each skill as an icon card
- Style with Tailwind CSS

## Example skills to display
- Languages: TypeScript, Python
- Frameworks: Next.js, FastAPI
- Tools: Docker, GitHub Actions

Have Claude Read the Issue and Implement

> Check GitHub Issue #1 and implement the Skills section component.

Generated src/components/Skills.tsx:

// src/components/Skills.tsx
// Skills section component (implemented based on Issue #1)

type Skill = {
  name: string
  category: 'language' | 'framework' | 'tool'
  icon?: string
}

type SkillsProps = {
  skills: Skill[]
}

export const Skills = ({ skills }: SkillsProps) => {
  const categoryLabel: Record<Skill['category'], string> = {
    language: 'Languages',
    framework: 'Frameworks',
    tool: 'Tools',
  }

  return (
    <section className="py-16 px-4 max-w-3xl mx-auto">
      <h2 className="text-3xl font-bold mb-8">Skills</h2>
      {(Object.keys(categoryLabel) as Skill['category'][]).map((cat) => (
        <div key={cat} className="mb-8">
          <h3 className="text-xl font-semibold mb-4 text-gray-700">
            {categoryLabel[cat]}
          </h3>
          <div className="flex flex-wrap gap-3">
            {skills
              .filter((s) => s.category === cat)
              .map((skill) => (
                <div
                  key={skill.name}
                  className="flex items-center gap-2 px-4 py-2 bg-white border border-gray-200 rounded-lg shadow-sm"
                >
                  {skill.icon && <span>{skill.icon}</span>}
                  <span className="text-sm font-medium">{skill.name}</span>
                </div>
              ))}
          </div>
        </div>
      ))}
    </section>
  )
}

Add Task Management Rules to CLAUDE.md

## Development Rules

- Always check the corresponding GitHub Issue before implementing a new feature.
- Include the Issue number in commit messages (e.g., `feat: add skills section (#1)`)

The my-portfolio at This Point

• .claude/settings.json — GitHub MCP configuration
• src/components/Skills.tsx — component generated from reading Issue #1
• CLAUDE.md — Issue reference rule appended

---

Next Level

The Skills section is complete. Next I’ll add a blog feature and automate article creation with a single command.

Level 3 Practice: Mass-Produce Blog Posts with the /blog Command