Token导航 LogoToken导航TokenDH.com
前端设计需要联网github未标认证来源可访问clear审计通过

learning-path-builder学习路径构建者

Agent Skill

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码,整理组件结构,或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式,避免只生成孤立片段;涉及页面改动时,应配合本地预览和构建检查确认视觉效果。

总安装

6,351

周安装

262

GitHub Stars

55

下载量

2,075
CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息,不托管安装包,也不代用户安装。

GitHub

来源数

3

许可证

MIT

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手,先确认命令和权限,再让它执行。

请帮我安装这个 Agent Skill:learning-path-builder(学习路径构建者)
来源仓库:https://github.com/rysweet/amplihack
仓库路径:skills/learning-path-builder
安装命令:
npx skills add https://github.com/rysweet/amplihack --skill learning-path-builder
安装前请先检查当前环境是否支持对应 CLI,并向我确认将要执行的命令、安装目录、联网范围和文件读写权限;确认后再执行。

命令行安装

复制命令到本机终端执行。不同来源提供的安装方式可能略有差异;本站展示可直接复制的安装命令,安装前请核对来源页面。

skills.shnpx skills
npx skills add https://github.com/rysweet/amplihack --skill learning-path-builder

简介

学习路径构建者辅助设计前端页面结构与交互逻辑框架。

  • 适合生成 React、Next.js、Vue 等组件代码及样式方案。
  • 可用于审查现有布局合理性或定位性能瓶颈问题。
  • 必须结合项目现有设计系统和构建流程使用,防止片段化输出。
  • learning-path-builder 属于前端设计类 Skill,可作为该场景下的辅助能力补充。

SKILL.md

Learning Path Builder Skill

Purpose

This skill creates personalized, structured learning paths that guide users through mastering new technologies, frameworks, or concepts. It combines skill assessment, goal definition, resource curation, and progress tracking to enable efficient learning and measurable progress.

When to Use This Skill

  • New Technology Adoption: Learning a new framework, language, or tool
  • Onboarding: Bringing team members up to speed on project technologies
  • Hackathon Preparation: Building required skills before a competition
  • Career Development: Structured path for advancing in a particular domain
  • Knowledge Gaps: Filling specific skill gaps in your technical stack
  • Upskilling: Transitioning from one technology to another
  • Learning Optimization: Creating efficient paths tailored to your learning style

Core Philosophy: Personalized Progressive Learning

AssessmentGoal SettingPath SequencingResource CurationProgress TrackingAdaptation

A good learning path:

  • Matches current skill level (beginner, intermediate, advanced)
  • Aligns with learning goals and timeline
  • Sequences concepts from simple to complex
  • Mixes multiple resource types (docs, tutorials, exercises, projects)
  • Provides checkpoints and milestones
  • Adapts to learning style and feedback

Learning Path Components

Every personalized learning path includes:

1. Skills Assessment

  • Current skill level (beginner/intermediate/advanced)
  • Relevant prior knowledge
  • Learning experience preference
  • Time availability
  • Career/project goals

2. Goal Definition

  • Primary learning objective
  • Target proficiency level
  • Timeline and milestones
  • Success metrics
  • Constraints and dependencies

3. Concept Sequence

  • Prerequisite concepts
  • Progressive complexity levels
  • Learning foundations first
  • Builds practical understanding over time

4. Resource Curation

  • Official documentation
  • High-quality tutorials
  • Interactive exercises
  • Real-world projects
  • Community resources

5. Learning Checkpoints

  • Milestone assessments
  • Practical exercises
  • Mini-projects
  • Reflection points
  • Progress validation

6. Progress Tracking

  • Completed modules
  • Assessed skill gains
  • Time investment
  • Confidence levels
  • Feedback integration

Step-by-Step Assessment Process

Step 1: Assess Current Skill Level

Ask targeted questions to understand:

  1. Technical Background

- Languages/frameworks you already know - Similar technologies you've used - Years of programming experience - Relevant professional experience

  1. Learning Style Preference

- Hands-on (learn by doing) - Theory-first (understand concepts) - Project-based (learn via real problems) - Visual (diagrams, videos) - Reading (documentation, blogs)

  1. Time Availability

- Hours per week available - Preferred learning schedule - Commitment timeline - Flexibility (can vary per week)

  1. Current Knowledge Gaps

- What specifically needs to be learned - Existing knowledge in adjacent areas - Misconceptions to address - Prior learning attempts

Step 2: Define Clear Learning Goals

Establish SMART goals:

  1. Specific: What exactly will you be able to do?
  2. Measurable: How will you know you've succeeded?
  3. Achievable: Is this realistic given your timeline?
  4. Relevant: How does this align with career/project needs?
  5. Time-bound: When do you want to achieve this?

Step 3: Sequence Concepts Progressively

Create learning sequence from foundations to advanced:

  1. Foundation Concepts (Week 1-2)

- Core terminology - Basic architecture - Key principles - Simple examples

  1. Core Functionality (Week 2-4)

- Main features - Common patterns - Practical exercises - Real examples

  1. Advanced Topics (Week 4+)

- Complex scenarios - Performance optimization - Best practices - Production deployment

  1. Specialization (As needed)

- Domain-specific knowledge - Integration patterns - Advanced debugging - Expert techniques

Step 4: Curate High-Quality Resources

For each concept, provide:

  1. Official Documentation

- Links to relevant docs - Specific sections to focus on - Time estimates - Difficulty level

  1. Tutorials and Guides

- Author/source credibility - Format (text, video, interactive) - Hands-on vs theoretical - Time to complete

  1. Interactive Exercises

- Practice problems - Coding exercises - Interactive sandboxes - Difficulty progression

  1. Real-World Projects

- Beginner projects (1-2 days) - Intermediate projects (1-2 weeks) - Advanced projects (2+ weeks) - Open-source contributions

  1. Community Resources

- Forums and Q&A sites - Blogs and articles - Videos and screencasts - Podcasts and talks

Step 5: Define Checkpoints and Milestones

Establish clear progress markers:

  1. Knowledge Checkpoints

- Quiz or self-assessment - Concept understanding verification - Time to complete

  1. Practical Exercises

- Hands-on coding tasks - Expected time - Success criteria - Difficulty level

  1. Mini-Projects

- Build something meaningful - Combine multiple concepts - Realistic scenario - Review guidelines

  1. Milestone Assessments

- Comprehensive projects - Demonstrate proficiency - Clear success criteria - Feedback mechanism

Step 6: Plan Progress Tracking

Setup mechanism for tracking:

  1. Weekly Check-ins

- Resources completed - Concepts mastered - Challenges encountered - Time spent

  1. Skill Validation

- Self-assessment - Quiz scores - Project quality - Peer review

  1. Timeline Adjustment

- Accelerate if on track - Extend if needed - Adapt based on feedback - Celebrate milestones

Learning Path Template

# [Technology] Learning Path

## Assessment

### Your Profile

- **Current Skill Level**: [Beginner/Intermediate/Advanced]
- **Learning Style**: [Hands-on/Theory/Project-based/Mix]
- **Time Available**: [X hours/week]
- **Prior Experience**: [Relevant technologies]

### Goals

- **Primary Objective**: [What you'll be able to do]
- **Target Level**: [Beginner/Intermediate/Advanced proficiency]
- **Timeline**: [X weeks]
- **Success Criteria**: [Measurable outcomes]

## Concept Sequence

### Foundation (Week 1)

**Concepts**: Core terminology, basic architecture, key principles

**Resources**:

1. [Resource Title](link) - X hour read/watch
2. [Interactive Exercise](link) - X hours hands-on
3. **Checkpoint**: Take quiz or build minimal example

### Core Functionality (Week 2-3)

**Concepts**: Main features, common patterns, real-world usage

**Resources**:

1. [Tutorial](link) - X hours
2. [Project](link) - Build working application
3. **Checkpoint**: Code review or project demo

### Advanced Topics (Week 4+)

**Concepts**: Complex scenarios, optimization, production patterns

**Resources**:

1. [Advanced Guide](link) - X hours
2. [Real Project](link) - Tackle open-source or real problem
3. **Checkpoint**: Implement advanced feature or optimization

## Progress Tracking

| Week | Topic          | Resource           | Status      | Time | Notes                |
| ---- | -------------- | ------------------ | ----------- | ---- | -------------------- |
| 1    | Foundations    | Docs + Tutorial    | In Progress | 5h   | Good grasp of basics |
| 2    | Core Feature A | Exercise + Project | Pending     | 0h   | Not started          |

## Next Steps

- Start Week 1 resources
- Join community (Discord/Forums)
- Set up development environment

Learning Path Examples

Example 1: React Learning Path (Beginner to Intermediate)

# React Learning Path - 4 Weeks

## Assessment
- **Current Level**: Intermediate JavaScript
- **Learning Style**: Hands-on with theory background
- **Time**: 10 hours/week
- **Goal**: Build production-ready React applications

## Week 1: Foundations
1. React Docs - Main Concepts (2 hours)
2. JSX fundamentals (1 hour)
3. Interactive sandbox exercises (2 hours)
4. Checkpoint: Build static component library

## Week 2: Component Lifecycle & Hooks
1. React Docs - Hooks (2 hours)
2. State management patterns (1.5 hours)
3. Build Todo app with hooks (3 hours)
4. Checkpoint: Explain useEffect cleanup

## Week 3: Advanced Patterns
1. Context API tutorial (1.5 hours)
2. Performance optimization (2 hours)
3. Build multi-page app (4 hours)
4. Checkpoint: Code performance review

## Week 4: Integration & Real Project
1. API integration patterns (1.5 hours)
2. Testing React components (1.5 hours)
3. Build real project (5 hours)
4. Checkpoint: Deploy live project

## Resources
- React.dev official docs
- React Query for data fetching
- Vitest for testing
- Project: Weather app with real API

Example 2: Docker Learning Path (Beginner)

# Docker Learning Path - 3 Weeks

## Assessment
- **Current Level**: Basic Linux command line
- **Learning Style**: Project-based
- **Time**: 8 hours/week
- **Goal**: Containerize applications, run multi-container services

## Week 1: Docker Basics
1. Docker Docs - Getting Started (1 hour)
2. Install Docker locally (0.5 hours)
3. Run and interact with containers (2 hours)
4. Dockerfile fundamentals (1 hour)
5. Checkpoint: Build Node.js app Dockerfile

## Week 2: Images and Registries
1. Docker Images deep dive (1.5 hours)
2. Docker Hub tutorial (1 hour)
3. Build and push custom image (2 hours)
4. Multi-stage builds (1 hour)
5. Checkpoint: Optimize image size

## Week 3: Docker Compose & Real App
1. Docker Compose basics (1.5 hours)
2. Multi-container application (2 hours)
3. Networking and volumes (1 hour)
4. Containerize your own project (3 hours)
5. Checkpoint: Deploy compose stack

## Resources
- Docker official documentation
- Play with Docker online sandbox
- Project: Containerize existing app

Example 3: TypeScript Learning Path (Intermediate Developer)

# TypeScript Learning Path - 6 Weeks

## Assessment
- **Current Level**: Intermediate JavaScript, familiar with types
- **Learning Style**: Theory-first with practical coding
- **Time**: 5-7 hours/week
- **Goal**: Write production TypeScript, advanced patterns

## Week 1-2: Fundamentals
- Type system basics
- Generics introduction
- Common types and patterns
- Project: Refactor JS module to TS

## Week 3-4: Advanced Features
- Advanced generics
- Conditional types
- Utility types
- Project: Build reusable utilities

## Week 5-6: Ecosystem & Real Code
- TypeScript with frameworks
- Testing typed code
- Production patterns
- Project: Full-stack TypeScript app

## Resources
- TypeScript Handbook
- Advanced Types deep dives
- Real project in your stack

Usage Examples

Example 1: Create a Learning Path from Scratch

User: I want to learn Vue.js and I have 10 hours per week.
      I know React and prefer hands-on learning.

Claude:

1. **Assessment** (clarify your situation):
   - You know React, so component model is familiar
   - Want hands-on learning
   - 10 hours/week available
   - Timeline: 4-6 weeks for intermediate proficiency

2. **Create Personalized Path**:
   - Week 1: Vue fundamentals (leverage React knowledge)
   - Week 2: Composition API (vs Options - choose best path)
   - Week 3-4: Real project
   - Week 5-6: Advanced patterns

3. **Provide Resources**:
   - Official Vue.dev documentation
   - Interactive tutorials
   - Comparison guide: Vue vs React
   - Project suggestions

4. **Setup Tracking**:
   - Weekly checkins
   - Progress dashboard
   - Milestone assessments

Example 2: Adapt Path Based on Feedback

User: I finished Week 2 of the React path but it was harder than expected.

Claude:

1. **Understand Challenge**:
   - Ask what was difficult
   - Assess understanding level
   - Identify knowledge gaps

2. **Adapt Path**:
   - Slow pace if needed
   - Add prerequisite concepts
   - Suggest alternative resources
   - Adjust timeline

3. **Provide Support**:
   - Recommend easier tutorial
   - Break down complex concept
   - Provide additional exercises
   - Schedule extra checkpoint

4. **Update Tracking**:
   - Adjust timeline
   - Add buffer weeks
   - Note learnings for future

Example 3: Multi-Technology Learning Path

User: I need to learn Kubernetes, Docker, and cloud deployment
      for an upcoming project. What's the right order?

Claude:

1. **Assess Prerequisites**:
   - Kubernetes requires Docker foundation
   - Both need Linux/container basics
   - Suggest learning order

2. **Create Integrated Path**:
   - Foundation: Linux & container concepts
   - Phase 1: Docker (3 weeks)
   - Phase 2: Kubernetes (4 weeks)
   - Phase 3: Cloud deployment (2 weeks)

3. **Show Dependencies**:
   - Docker exercises inform Kubernetes concepts
   - Real project ties everything together

4. **Total Commitment**:
   - X weeks at Y hours/week
   - Milestone dates
   - Integration points

Assessment Checklist

Path Quality Verification

  • Matches stated skill level
  • Aligns with learning goals
  • Realistic timeline given available hours
  • Concepts sequenced from simple to complex
  • Mix of theory and hands-on practice
  • Multiple resource types included
  • Clear checkpoints defined
  • Success criteria measurable
  • Includes real-world projects
  • Accounts for learning style preference

Resource Quality

  • From authoritative sources
  • Recently updated (within 6 months)
  • Accurate and complete
  • Well-reviewed by community
  • Free or reasonable cost
  • Accessible (language, format)
  • Estimated time provided
  • Difficulty level labeled

Progress Tracking

  • Clear way to track completion
  • Checkpoint assessments defined
  • Adjustment mechanism for struggles
  • Celebration of milestones
  • Community/support resources listed
  • Reflection mechanism built in

Key Principles

1. Personalization Over Generic

  • Paths adapt to individual learning style
  • Respect prior knowledge and background
  • Adjust pace based on feedback
  • Consider time constraints

2. Progressive Complexity

  • Foundation before advanced
  • Simple examples before real code
  • Theory before deep dives
  • Repeating concepts in new contexts

3. Multiple Resource Types

  • Don't rely on single format
  • Mix reading, video, hands-on, projects
  • Vary authors and perspectives
  • Include community knowledge

4. Measurable Progress

  • Clear checkpoints and milestones
  • Self-assessment mechanisms
  • Projects demonstrate learning
  • Tracked time investment

5. Flexibility and Adaptation

  • Adjust when struggling
  • Accelerate when ahead
  • Skip prerequisites if known
  • Pivot based on interests

Common Pitfalls to Avoid

  • Unrealistic Timelines: Don't compress learning into impossible timeframes
  • Too Many Resources: Curate quality over quantity
  • Skipping Fundamentals: Never skip prerequisites
  • No Hands-On: Theory alone doesn't build skills
  • Missing Checkpoints: Progress visibility matters
  • Ignoring Learning Style: Same path doesn't work for everyone
  • No Real Projects: Theory must connect to practice
  • Overwhelming Scope: Break into manageable pieces

Success Criteria

A successful learning path:

  • User completes all checkpoints
  • Skills are applied in real projects
  • User reports confidence improvement
  • Can teach others the concepts
  • Applies learning in work/personal projects
  • Continues learning independently
  • Understands when to seek advanced resources

Integration with Other Skills

  • Project Builder: Use created learning paths for onboarding new team members
  • Module Spec Generator: Document what was learned in structured format
  • Performance Optimizer: Identify which resources were most efficient

Advanced Features

Learning Style Adaptation

  • Adjust resources based on learning preference
  • Mix theory-first for analytical learners
  • Project-first for hands-on learners
  • Visual resources for visual thinkers

Prerequisite Chaining

  • Identify dependencies between topics
  • Skip if already known
  • Add depth if weak areas identified
  • Create customized starting point

Community Integration

  • Link to local meetups
  • Suggest Discord communities
  • Open-source projects to contribute to
  • Mentorship opportunities

Career Path Integration

  • Connect learning to career goals
  • Show progression to next level
  • Identify specialization options
  • Build portfolio through projects

适合场景

01

用户想查找某类 Agent Skill 时

02

需要根据任务场景推荐可安装能力包时

03

需要对比不同来源的安装命令和来源信息时

04

需要参考平台分布和安装热度时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明,方便继续核验

能力 4

补充不同宿主或平台的使用分布数据

能力 5

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用;具体调用方式请以来源页面和 README 为准。

平台分布

Claude Code

28.76%
按下载量换算597

OpenCode

21.36%
按下载量换算443

Antigravity

17.3%
按下载量换算359

Gemini CLI

12.85%
按下载量换算267

windsurf

8.44%
按下载量换算175

Cursor

3.67%
按下载量换算76

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

需要联网

该 Skill 可能需要联网访问来源站点、仓库或外部 API;具体网络访问范围需要结合源码和 README 复核。

安装前确认

本站仅展示第三方公开信息,不托管安装包,不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。

来源信息

继续浏览同类 Skills