Token导航 LogoToken导航

Agent Skill · 前端设计

testing(测试)

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

testing 是前端设计类 Agent Skill,可用宿主为 Codex、Claude、Cursor、Gemini CLI,通过GitHub 仓库获取,权限为调用外部服务;许可证为 MIT,第三方扫描已通过,按安装量在前端设计类的 10,216 个 Skill 里排第 3,781。

总安装 1,128周安装 47GitHub Stars 12下载 376核验 2026-05-01

安装说明

本站只整理中文说明,不托管安装包,也不代用户安装。
GitHub
许可证
MIT

安装方式

通过对话安装

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

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

命令行安装

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

skills.shnpx skills
npx skills add https://github.com/scientiacapital/skills --skill testing

这个 Skill 是做什么的

前端设计类 Skill 关注页面结构、视觉规范和组件写法,输出通常是可运行的界面代码。

testing 用于辅助前端页面、组件和样式逻辑的开发与维护。适合生成或审查 React、Vue、CSS 等相关代码,整理组件结构。通过 npx skills add 命令从指定仓库安装并使用该技能。需要结合项目现有设计系统和路由方式,避免生成孤立片段。涉及页面改动时应配合本地预览和构建检查确认视觉效果。

来源仓库内路径:skills/testing

上手步骤

4 步
  1. 1

    确认自己的宿主工具

    公开资料标注支持 Codex、Claude、Cursor、Gemini CLI;先确认自己用的是其中之一,再按对应工具的 Skills 目录放置。

  2. 2

    拿到安装命令

    可以直接复制的命令是 npx skills add https://github.com/scientiacapital/skills --skill testing;命令里的占位符换成自己的路径或密钥再执行。

  3. 3

    安装后重启宿主

    命令执行完要完全退出宿主工具再打开,让新装的 Skill 被重新扫描到,否则列表里可能看不到。

  4. 4

    按最小权限试用

    它需要调用外部服务,先在测试目录或测试账号里跑,确认没问题再放到正式项目。

常见问题

6 条

testing 怎么安装?

在终端执行 npx skills add https://github.com/scientiacapital/skills --skill testing。装完完全退出宿主工具再打开,让它重新扫描本地 Skill。

testing 支持哪些 AI 工具?

公开资料标注支持 Codex、Claude、Cursor、Gemini CLI。其他工具只要能读取本地 Skill 目录,一般也能手动放进去,但要自己确认触发方式是否一致。

testing 需要什么权限?

权限级别是调用外部服务。该 Skill 可能调用第三方服务、云服务或外部模型 API,使用前需要确认账号、额度、数据发送范围和服务条款。

testing 是免费的吗?

来源标注的许可证是 MIT。本站不代收任何费用,也不托管安装包;能否商用、要不要署名,以许可证原文为准。

testing 用的人多吗?

公开数据是累计安装 1,128 次,近一周安装 47 次,下载 376 次,GitHub 12 星。这些数字来自第三方目录统计,只能当作热度参考,不代表质量或安全性。

testing 安全吗?

第三方扫描结果为通过,但这只覆盖已知的静态检查项,不能替代自己读一遍源码和安装命令。

值得选的地方和要先想清楚的地方

值得选的地方

  • 同时适配 4 种工具,换客户端不用重新找替代品。
  • 3 个目录同时收录,说明这个 Skill 流传比较广。
  • 许可证明确为 MIT,商用和分发边界好判断。
  • 第三方扫描已通过,常见的高风险行为没有命中。

先想清楚的地方

  • 第三方目录整理,版本更新和行为细节以来源仓库为准。

适不适合你

更适合

  • 已经在用 Codex,想直接扩展它能力的人。
  • 需要处理前端设计类任务、又不想每次都手写提示词的人。
  • 需要许可证清楚、并且有第三方扫描结果的团队项目。

不太适合

  • 需要厂商级技术支持和 SLA 的生产系统。

前端设计类 Skill 对比

6 个同类
Skill总安装GitHub 星权限许可证扫描
frontend-design

前端设计 · Codex、Claude

8,823,360126,072只读MIT通过
vercel-composition-patterns

Vercel 组合模式 · Codex、Claude

3,858,81625,893需要联网MIT通过
vercel-react-native-skills

Vercel React native skills 前端 · Codex、Claude

2,468,66425,878只读MIT通过
adapt

adapt 搜索 · Codex、Claude

2,027,04023,125操作浏览器未明确通过
bolder

bolder 分析 · Codex、Claude

2,004,28823,130只读未明确通过
testing

测试 · 本页

1,12812调用外部服务MIT通过

按安装量取同分类前几名;数字来自第三方目录统计,只作热度参考,不代表质量结论。

SKILL.md 原文

This skill emphasizes writing tests that provide confidence without becoming maintenance burdens. Tests should be fast, reliable, and focused on behavior rather than implementation details.

<quick_start> TDD Red-Green-Refactor cycle:

  1. RED: Write a failing test first test('adds numbers', () => {expect(add(1, 2)).toBe(3); // Fails - add() doesn't exist});
  2. GREEN: Write minimum code to pass const add = (a, b) => a + b; // Test passes
  3. REFACTOR: Clean up while tests stay green

Test pyramid: 70% unit, 25% integration, 5% E2E </quick_start>

<success_criteria> Testing is successful when:

  • TDD cycle followed: test written before implementation code
  • Test pyramid balanced: ~70% unit, ~25% integration, ~5% E2E
  • Tests are independent and can run in any order
  • No flaky tests (run 3x to verify reliability)
  • Coverage meets targets: 70-80% lines, 100% critical paths
  • Test names describe behavior (what + when + expected result)
  • Mocks only used for external dependencies, not own code </success_criteria>

<core_principles>

The Testing Mindset

  1. Tests are documentation - A failing test is a specification that hasn't been implemented
  2. Test behavior, not implementation - Tests should survive refactoring
  3. Fast feedback loops - Unit tests run in milliseconds, not seconds
  4. Isolation by default - Each test should be independent
  5. Arrange-Act-Assert - Clear structure in every test </core_principles>

<tdd_workflow>

TDD: Red-Green-Refactor

┌─────────────────────────────────────────────────────────┐
│                    TDD CYCLE                             │
│                                                          │
│    ┌─────────┐                                          │
│    │   RED   │ ◄─── Write a failing test                │
│    └────┬────┘                                          │
│         │                                                │
│         ▼                                                │
│    ┌─────────┐                                          │
│    │  GREEN  │ ◄─── Write minimum code to pass          │
│    └────┬────┘                                          │
│         │                                                │
│         ▼                                                │
│    ┌─────────┐                                          │
│    │REFACTOR │ ◄─── Clean up while tests stay green     │
│    └────┬────┘                                          │
│         │                                                │
│         └──────────────► Back to RED                    │
└─────────────────────────────────────────────────────────┘

The Rules

  1. Write a failing test first - Never write production code without a failing test
  2. Write only enough test to fail - Compilation failures count as failures
  3. Write only enough code to pass - No more, no less
  4. Refactor only when green - Never refactor with failing tests

Common TDD Mistakes

MistakeWhy It's WrongInstead
Writing tests after codeTests become confirmation biasRed-Green-Refactor
Testing private methodsTests implementation, not behaviorTest public interface
Big leaps in test complexityHard to debug failuresBaby steps
Skipping refactor stepTechnical debt accumulatesAlways clean up
</tdd_workflow>

<test_pyramid>

The Test Pyramid

                    ┌───────────┐
                    │    E2E    │  Few, slow, expensive
                    │   Tests   │  (minutes)
                    └─────┬─────┘
                          │
               ┌──────────┴──────────┐
               │   Integration Tests  │  Some, medium speed
               │   (API, Database)    │  (seconds)
               └──────────┬───────────┘
                          │
        ┌─────────────────┴─────────────────┐
        │          Unit Tests                │  Many, fast, cheap
        │    (Functions, Components)         │  (milliseconds)
        └────────────────────────────────────┘

Distribution Guidelines

TypePercentageSpeedScope
Unit70-80%<10ms eachSingle function/component
Integration15-25%<1s eachMultiple components, DB
E2E5-10%<30s eachFull user flows

What to Test Where

Unit Tests:

  • Pure functions
  • Business logic
  • Data transformations
  • Validation rules
  • Component rendering

Integration Tests:

  • API endpoints
  • Database operations
  • Service interactions
  • Component integration

E2E Tests:

  • Critical user flows (login, checkout)
  • Happy paths only
  • Smoke tests </test_pyramid>

<when_to_mock>

Mocking Strategy

The London vs Detroit Schools

London School (Mockist):

  • Mock all dependencies
  • Test in complete isolation
  • Tests are very focused

Detroit School (Classicist):

  • Only mock external services
  • Test natural units together
  • Tests are more realistic

Recommended: Pragmatic approach

  • Mock external services (APIs, DBs in unit tests)
  • Don't mock your own code unless necessary
  • Use real implementations in integration tests

What to Mock

MockDon't Mock
External APIsYour own pure functions
File system (in unit tests)Data transformations
Network requestsBusiness logic
Time/randomnessIn-memory data structures
Expensive computationsSimple utilities

Mocking Patterns

// GOOD: Mock external dependency
const mockFetch = vi.fn().mockResolvedValue({ data: [] });

// BAD: Mocking your own utilities
const mockFormatDate = vi.fn(); // Don't do this

// GOOD: Dependency injection for testability
function createService(httpClient = fetch) {
  return {
    getData: () => httpClient('/api/data')
  };
}

// In test:
const mockClient = vi.fn();
const service = createService(mockClient);

</when_to_mock>

<test_structure>

Test Organization

File Naming

src/
├── components/
│   ├── Button.tsx
│   └── Button.test.tsx      # Colocated test
├── utils/
│   ├── format.ts
│   └── format.test.ts
└── __tests__/               # Or separate folder
    └── integration/
        └── api.test.ts

Test Naming

// Pattern: describe what + when + expected result
describe('UserService', () => {
  describe('createUser', () => {
    it('returns user object when given valid email', () => {});
    it('throws ValidationError when email is invalid', () => {});
    it('sends welcome email after successful creation', () => {});
  });
});

// Alternative: BDD style
describe('UserService', () => {
  describe('when creating a user with valid data', () => {
    it('should return the created user', () => {});
    it('should send a welcome email', () => {});
  });

  describe('when email is invalid', () => {
    it('should throw ValidationError', () => {});
  });
});

Arrange-Act-Assert

it('calculates total with discount', () => {
  // Arrange - set up test data
  const cart = createCart([
    { price: 100, quantity: 2 },
    { price: 50, quantity: 1 }
  ]);
  const discount = 0.1;

  // Act - perform the action
  const total = calculateTotal(cart, discount);

  // Assert - verify result
  expect(total).toBe(225); // (200 + 50) * 0.9
});

</test_structure>

<what_not_to_test>

What NOT to Test

Skip These

  1. Framework code - React's useState, Express routing
  2. Third-party libraries - They have their own tests
  3. Trivial getters/setters - No logic = no test needed
  4. Implementation details - Private methods, internal state
  5. One-line functions - Unless they have complex logic

Focus On

  1. Business logic - Where bugs hide
  2. Edge cases - Nulls, empty arrays, boundaries
  3. Error paths - What happens when things fail
  4. User-facing behavior - What users actually do
  5. Regressions - Bugs that came back once

Coverage Targets

MetricTargetNotes
Line coverage70-80%Higher isn't always better
Branch coverage70-80%More important than lines
Critical paths100%Auth, payments, data mutations

Warning: 100% coverage doesn't mean good tests. Bad tests can hit every line without testing anything meaningful. </what_not_to_test>

TopicReference FileWhen to Load
Unit testing patternsreference/unit-testing.mdWriting unit tests, mocking
Integration testingreference/integration-testing.mdAPI tests, database tests
Test organizationreference/test-organization.mdStructuring test suites
Coverage strategiesreference/coverage-strategies.mdSetting coverage goals

To load: Ask for the specific topic or check if context suggests it.

<framework_patterns>

Quick Reference by Framework

pytest (Python)

# Fixtures
@pytest.fixture
def user():
    return User(name="test")

def test_user_greet(user):
    assert user.greet() == "Hello, test"

# Parametrize
@pytest.mark.parametrize("input,expected", [
    ("hello", "HELLO"),
    ("world", "WORLD"),
])
def test_uppercase(input, expected):
    assert uppercase(input) == expected

vitest/jest (TypeScript)

// Basic test
test('adds numbers', () => {
  expect(add(1, 2)).toBe(3);
});

// Mock
vi.mock('./api', () => ({
  fetchUser: vi.fn().mockResolvedValue({ name: 'test' })
}));

// Component test
import { render, screen } from '@testing-library/react';

test('renders button', () => {
  render(<Button>Click</Button>);
  expect(screen.getByRole('button')).toHaveTextContent('Click');
});

Testing Library Principles

  1. Query by role, not test ID
  2. Test what users see, not implementation
  3. Prefer userEvent over fireEvent
  4. Avoid testing internal state </framework_patterns>

Before marking code complete:

  • Unit tests cover happy path
  • Unit tests cover error cases
  • Edge cases tested (null, empty, boundary)
  • Integration tests for API endpoints
  • No flaky tests (run 3x to verify)
  • Tests are independent (run in any order)
  • Test names describe behavior
  • No hardcoded timeouts (use waitFor)
  • Mocks are reset between tests
  • Coverage meets project standards

Emit Outcome Sidecar

As the final step, write to ~/.claude/skill-analytics/last-outcome-testing.json:

{"ts":"[UTC ISO8601]","skill":"testing","version":"1.0.0","variant":"default",
 "status":"[success|partial|error]","runtime_ms":[estimated ms from start],
 "metrics":{"tests_written":[n],"coverage_delta_pct":[n]},
 "error":null,"session_id":"[YYYY-MM-DD]"}

Use status "partial" if some stages failed but results were produced. Use "error" only if no output was generated.

平台分布

Claude Code

25.29%
按下载量换算95

Antigravity

24.49%
按下载量换算92

Gemini CLI

16.49%
按下载量换算62

Codex

12.17%
按下载量换算46

OpenCode

7.66%
按下载量换算29

windsurf

3.75%
按下载量换算14

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

调用外部服务

该 Skill 可能调用第三方服务、云服务或外部模型 API,使用前需要确认账号、额度、数据发送范围和服务条款。

安装前确认

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

继续浏览同类 Skills