[00] Documentation

TraeWork Skills Library

A browsable overview for the skills that turn references, design rules, and implementation context into calm TraeWork-ready pages.

Browse modules Review workflow

[01] Featured

The core skill for page rebuilding

The lead module behaves like the featured story on a publication page: it explains the primary capability, then points into related modules.

Rebuild source pages into TraeWork-native module overviews

The page rebuilder keeps the useful information architecture from a source URL while replacing color, density, component choices, and interaction patterns with the TraeWork design system.

Input URL, screenshot, copied HTML, or local artifact 01

Translate Page type, sections, journey, and module order 02

Render Token-first HTML with responsive light mode 03

[02] Library

Browse skill modules

Search and filter the modules that support a TraeWork rebuild. The interaction mirrors a content index while staying useful as a product overview.

[00] Design

Design system translator

Converts a source page's visual ideas into TraeWork typography, spacing, surface, radius, color, and icon decisions.

[01] Content

Information architecture mapper

Finds the page type, audience, conversion path, section sequence, and repeated content patterns worth preserving.

[02] Design

Component composer

Builds large visual regions from TraeWork cards, tags, rows, tabs, rule lines, and copy instead of decorative illustrations.

[03] Content

Copy adapter

Keeps short labels and factual structure where appropriate, then rewrites longer source copy into concise product language.

[04] Quality

Responsive QA pass

Checks mobile width, clipped text, light-mode states, focus visibility, icon loading, and source-critical content access.

[05] Quality

Output boundary checker

Confirms the page lands in the right archetype folder and avoids unrelated changes to existing prototypes or shared files.

No modules match the current filter.

[03] Workflow

From reference page to TraeWork page

The rebuild flow is intentionally narrow: extract the structure, choose the archetype, adapt the modules, then verify the static output.

[00]

Extract

Identify page type, audience, primary task, navigation model, and major sections from the source page.

[01]

Route

Pick the correct workspace archetype before writing code so the prototype remains easy to find and compare.

[02]

Adapt

Replace source styling with token-first TraeWork components, light-mode token bindings, and calmer typography.

[03]

Verify

Open the page, test interactions, and check common layout risks before handing off the file.

[04] Handoff

Ready for a focused rebuild

Give the rebuilder a source page and a target module. The output stays static, editable, and aligned with the TraeWork design language.

Review featured module