Hr Onboarding
- 240 installs
- 83.7k repo stars
- Updated August 5, 2026
- nexu-io/open-design
Create HR employee onboarding flows with welcome steps, document checklists, progress indicators, and role-setup screens for internal people-ops SaaS portals.
About
Open-design skill for HR onboarding experiences: guided welcome sequences, document collection checklists, step progress, role and equipment setup forms, and completion states tailored to internal SaaS people-ops products in the nexu-io library.
- Multi-step onboarding flows
- Document checklist UI
- Progress and status tracking
- Employee welcome patterns
Hr Onboarding by the numbers
- 240 all-time installs (skills.sh)
- +1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
- Ranked #890 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/nexu-io/open-design --skill hr-onboardingAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 240 |
|---|---|
| repo stars | ★ 83.7k |
| Last updated | August 5, 2026 |
| Repository | nexu-io/open-design ↗ |
What it does
Create HR employee onboarding flows with welcome steps, document checklists, progress indicators, and role-setup screens for internal people-ops SaaS portals.
Files
HR Onboarding Skill
Produce a single-screen onboarding plan in HTML.
Workflow
1. Read the active DESIGN.md. 2. Identify the role + tenure expectations from the brief. Default to a 30/60/90-day shape if unspecified. 3. Layout:
- Cover banner: name placeholder, role, start date, manager + buddy.
- "Day 1" panel with the literal schedule (kickoff time, lunch, 1:1 slot).
- First-week timeline (Mon → Fri, two activities per day).
- 30 / 60 / 90 day milestone cards with three concrete outcomes each.
- Resource list: handbook, Slack channels, key dashboards, payroll setup.
- "You're set when…" checklist — five outcomes with checkboxes.
4. Single inline <style>, semantic HTML.
Output contract
<artifact identifier="onboarding-plan" type="text/html" title="Onboarding Plan">
<!doctype html>...</artifact><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Welcome to Northwind — Maya's Onboarding Plan</title>
<style>
:root {
--bg: #fbf9f4;
--paper: #ffffff;
--ink: #14110e;
--muted: #6b6760;
--line: #ece6d8;
--accent: #c2521a;
--accent-soft: #fbe6d6;
--positive: #2c8a4f;
--display: 'Georgia', 'Times New Roman', serif;
--body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
--mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 14.5px; line-height: 1.55; }
.wrap { max-width: 1080px; margin: 28px auto; padding: 0 32px 64px; }
/* Cover */
.cover { padding: 36px 40px; background: var(--ink); color: var(--paper); border-radius: 16px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.cover .eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-soft); }
.cover h1 { font-family: var(--display); font-size: 38px; line-height: 1.05; letter-spacing: -0.01em; margin: 8px 0 12px; }
.cover .meta { display: flex; gap: 28px; font-size: 13px; color: rgba(255,255,255,0.74); }
.cover .meta strong { color: var(--paper); display: block; font-weight: 600; font-size: 14px; }
.cover-art { width: 130px; height: 130px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #ec8b5b); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 56px; color: var(--paper); }
section { margin-top: 44px; }
h2 { font-family: var(--display); font-size: 22px; margin: 0 0 6px; letter-spacing: -0.005em; }
.section-sub { color: var(--muted); margin: 0 0 18px; font-size: 13.5px; }
/* Day 1 */
.day-one { padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.schedule { display: grid; grid-template-columns: 110px 1fr; gap: 0; }
.schedule-row { display: contents; }
.schedule-row .time { padding: 12px 0; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--muted); }
.schedule-row .item { padding: 12px 0; border-top: 1px solid var(--line); }
.schedule-row:first-child .time, .schedule-row:first-child .item { border-top: none; }
.schedule-row .item strong { display: block; font-weight: 600; }
.schedule-row .item span { color: var(--muted); font-size: 13px; }
/* Week timeline */
.week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.day { padding: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; gap: 12px; min-height: 200px; }
.day-head { display: flex; justify-content: space-between; align-items: baseline; }
.day-name { font-family: var(--display); font-size: 16px; font-weight: 700; }
.day-date { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.activity { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.activity .dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 6px; }
.activity small { display: block; color: var(--muted); margin-top: 2px; font-size: 11.5px; }
/* 30/60/90 */
.milestones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.milestone { padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.milestone .badge { display: inline-block; font-family: var(--mono); font-size: 11px; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); letter-spacing: 0.06em; margin-bottom: 10px; }
.milestone h3 { font-family: var(--display); font-size: 18px; margin: 0 0 12px; }
.milestone ul { padding-left: 18px; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.milestone li::marker { color: var(--accent); }
/* Resources & checklist */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.panel { padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.panel h3 { font-family: var(--display); font-size: 17px; margin: 0 0 12px; }
.resource { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); align-items: center; font-size: 13.5px; }
.resource:first-of-type { border-top: none; padding-top: 0; }
.resource .icon { width: 28px; height: 28px; background: var(--accent-soft); border-radius: 7px; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.resource .meta { color: var(--muted); font-family: var(--mono); font-size: 11px; }
.check { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px dashed var(--line); }
.check:first-of-type { border-top: none; padding-top: 0; }
.check .box { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: transparent; }
.check.done .box { background: var(--positive); border-color: var(--positive); color: var(--paper); }
.check strong { display: block; font-weight: 600; }
.check span { color: var(--muted); font-size: 12.5px; }
footer { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
@media (max-width: 900px) {
.cover { grid-template-columns: 1fr; text-align: center; }
.cover-art { margin: 0 auto; }
.week { grid-template-columns: 1fr 1fr; }
.milestones { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="wrap">
<div class="cover">
<div>
<div class="eyebrow">Onboarding plan · 30/60/90</div>
<h1>Welcome, Maya. Let's make your first 90 days feel deliberate.</h1>
<div class="meta">
<div><strong>Role</strong>Product Designer · Growth squad</div>
<div><strong>Start date</strong>Mon, 4 November 2025</div>
<div><strong>Manager</strong>Alvaro Méndez</div>
<div><strong>Onboarding buddy</strong>Sasha Lin</div>
</div>
</div>
<div class="cover-art">M</div>
</div>
<section>
<h2>Day 1 · Monday</h2>
<p class="section-sub">A grounded day. Coffee with the team, a working laptop, and one shipped commit on the docs site by 5pm.</p>
<div class="day-one">
<div class="schedule">
<div class="schedule-row"><div class="time">09:00</div><div class="item"><strong>Kickoff with Alvaro</strong><span>Welcome, week-one walkthrough, expectations chat. Office Room 3 (or Zoom).</span></div></div>
<div class="schedule-row"><div class="time">10:00</div><div class="item"><strong>IT setup with Devon</strong><span>Laptop, badge, SSO, Slack, Figma, Linear, GitHub. Bring two photo IDs.</span></div></div>
<div class="schedule-row"><div class="time">11:30</div><div class="item"><strong>Coffee with Sasha (buddy)</strong><span>The unwritten rules, who-to-ask map, where the good lunch spots are.</span></div></div>
<div class="schedule-row"><div class="time">12:30</div><div class="item"><strong>Team lunch · Northwind cafeteria</strong><span>Whole Growth squad joins. No agenda.</span></div></div>
<div class="schedule-row"><div class="time">14:00</div><div class="item"><strong>Read & explore</strong><span>Handbook, last quarter's design crit recordings, Figma library.</span></div></div>
<div class="schedule-row"><div class="time">16:00</div><div class="item"><strong>Ship "I exist" PR</strong><span>Add yourself to the team page on the docs site. Counts as your first commit.</span></div></div>
<div class="schedule-row"><div class="time">17:00</div><div class="item"><strong>End-of-day check-in with Alvaro</strong><span>15 min. What was confusing, what wasn't. Repeat tomorrow if useful.</span></div></div>
</div>
</div>
</section>
<section>
<h2>First week timeline</h2>
<p class="section-sub">Two activities per day. Anything else is bonus.</p>
<div class="week">
<div class="day">
<div class="day-head"><div class="day-name">Mon</div><div class="day-date">Nov 4</div></div>
<div class="activity"><span class="dot"></span><div><strong>Kickoff + setup</strong><small>Alvaro · 09:00</small></div></div>
<div class="activity"><span class="dot"></span><div><strong>Ship team-page PR</strong><small>Sasha can review</small></div></div>
</div>
<div class="day">
<div class="day-head"><div class="day-name">Tue</div><div class="day-date">Nov 5</div></div>
<div class="activity"><span class="dot"></span><div><strong>Design system tour</strong><small>Yuko · 10:00</small></div></div>
<div class="activity"><span class="dot"></span><div><strong>Shadow user research call</strong><small>11:00 with Sam</small></div></div>
</div>
<div class="day">
<div class="day-head"><div class="day-name">Wed</div><div class="day-date">Nov 6</div></div>
<div class="activity"><span class="dot"></span><div><strong>Squad weekly</strong><small>09:30</small></div></div>
<div class="activity"><span class="dot"></span><div><strong>Pick a starter ticket</strong><small>From the "good first issues" lane</small></div></div>
</div>
<div class="day">
<div class="day-head"><div class="day-name">Thu</div><div class="day-date">Nov 7</div></div>
<div class="activity"><span class="dot"></span><div><strong>Design crit attendance</strong><small>14:00. Just listen.</small></div></div>
<div class="activity"><span class="dot"></span><div><strong>1:1 with skip-level</strong><small>Avi · 16:00</small></div></div>
</div>
<div class="day">
<div class="day-head"><div class="day-name">Fri</div><div class="day-date">Nov 8</div></div>
<div class="activity"><span class="dot"></span><div><strong>End-of-week retro</strong><small>15-min note to Alvaro</small></div></div>
<div class="activity"><span class="dot"></span><div><strong>Optional: All-hands demo</strong><small>17:00 · drinks after</small></div></div>
</div>
</div>
</section>
<section>
<h2>30 · 60 · 90 day milestones</h2>
<p class="section-sub">Three outcomes per checkpoint. We'll review each at the matching 1:1 with Alvaro.</p>
<div class="milestones">
<div class="milestone">
<span class="badge">Day 30</span>
<h3>Find your footing</h3>
<ul>
<li>Shipped one small, end-to-end design change to production.</li>
<li>Mapped every recurring meeting and why it exists.</li>
<li>Met with each cross-functional partner (eng, PM, research, marketing).</li>
</ul>
</div>
<div class="milestone">
<span class="badge">Day 60</span>
<h3>Own a feature</h3>
<ul>
<li>Driving design on the new onboarding redesign — own the spec.</li>
<li>Ran your first design crit as the presenter.</li>
<li>Drafted one process improvement and posted it for the team.</li>
</ul>
</div>
<div class="milestone">
<span class="badge">Day 90</span>
<h3>Move the team forward</h3>
<ul>
<li>Shipped a feature you led from research → launch.</li>
<li>Mentored someone — even informally.</li>
<li>Shared one hot take in all-hands and lived to tell.</li>
</ul>
</div>
</div>
</section>
<section>
<h2>Things to bookmark</h2>
<p class="section-sub">Open these, save them in your browser, then forget about this page.</p>
<div class="grid-2">
<div class="panel">
<h3>Resources</h3>
<div class="resource"><div class="icon">📘</div><div><strong>Northwind Handbook</strong></div><div class="meta">handbook.nw</div></div>
<div class="resource"><div class="icon">💬</div><div><strong>#growth-squad</strong></div><div class="meta">Slack</div></div>
<div class="resource"><div class="icon">🎨</div><div><strong>Design Library v3.4</strong></div><div class="meta">Figma</div></div>
<div class="resource"><div class="icon">📊</div><div><strong>Growth dashboard</strong></div><div class="meta">grafana.nw</div></div>
<div class="resource"><div class="icon">💸</div><div><strong>Payroll & benefits</strong></div><div class="meta">Rippling</div></div>
<div class="resource"><div class="icon">📅</div><div><strong>Onboarding calendar</strong></div><div class="meta">cal.nw/onboard</div></div>
</div>
<div class="panel">
<h3>You're set when…</h3>
<div class="check done"><div class="box">✓</div><div><strong>Laptop, SSO, and badge work end-to-end.</strong><span>Includes Slack, Figma, Linear, GitHub, 1Password.</span></div></div>
<div class="check done"><div class="box">✓</div><div><strong>You've met everyone on the squad.</strong><span>Coffee, walk, or 15-min Zoom — your call.</span></div></div>
<div class="check"><div class="box"></div><div><strong>You've shipped your first PR.</strong><span>Even tiny ones count. Sasha will help.</span></div></div>
<div class="check"><div class="box"></div><div><strong>You can find any meeting on the calendar.</strong><span>And know which ones you can decline.</span></div></div>
<div class="check"><div class="box"></div><div><strong>You feel comfortable asking dumb questions.</strong><span>This is the most important one. We mean it.</span></div></div>
</div>
</div>
</section>
<footer>
<span>Northwind People Ops · Onboarding plan template v3.1</span>
<span>Updated October 2025</span>
</footer>
</div>
</body>
</html>
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k