Documentation

A modern, developer-centric knowledge surface for onboarding, platform guidance, and learner enablement.

Docs navigation

Explore topics

Browse the core workflows that shape the learner experience inside Next XyberSec.

Developer docs

Next XyberSec documentation

Build learner confidence with a polished, documentation-first experience that explains onboarding, platform flows, and product behavior in a format inspired by the best developer platforms.

Sections

Theme

Dark UI

Mode

UI Only

Overview

Boot up your cyber training workspace

Next XyberSec gives learners a focused, developer-style control panel for onboarding, exploration, and daily practice. The docs experience is designed to help teams ship structured cybersecurity learning journeys without overwhelming new recruits.

What to emphasize

Launch guided learner onboarding in minutes.
Organize security lessons, labs, and milestones by path.
Keep documentation readable for beginners and operators alike.

Note

Use the docs hub as a central reference for learners, instructors, and internal enablement teams.

Example snippet

// app/(app)/docs/page.tsx
export default function DocsPage() {
  return <DocsLayout />;
}

Setup

Prepare the learning platform interface

The UI ships with a dark, distraction-free reading surface and reusable components powered by Next.js App Router, Tailwind CSS, and shadcn/ui. This page intentionally keeps everything front-end only so backend integrations can be layered in later.

What to emphasize

Keep the interface modular with isolated docs components.
Reuse motion patterns for navigation, search, and content transitions.
Maintain a polished experience across desktop and mobile breakpoints.

Note

Backend search, analytics, and content persistence are intentionally deferred until the UI contract is finalized.

Example snippet

npm install
npm run dev
# open /docs to review the documentation UI

Catalog

Structure curriculum like a product manual

Present courses as clearly segmented docs chapters. Learners should be able to move from platform orientation into hands-on modules with the same confidence they expect from modern developer documentation.

What to emphasize

Break courses into mission-ready sections and prerequisites.
Surface examples, command snippets, and policy notes inline.
Guide users toward the next lesson without visual clutter.

Note

Treat every course module as a documented workflow: concise, skimmable, and action-oriented.

Example snippet

<CourseCard
  title="Network Defense Fundamentals"
  level="Beginner"
  modules={8}
/>

Insights

Show momentum with clear progress cues

Learners stay engaged when milestones are visible. The docs layout demonstrates how to combine narrative guidance with compact status components so progress feels immediate and measurable.

What to emphasize

Pair explanatory copy with progress summaries.
Use supportive callouts for checkpoint rules and completion criteria.
Keep metrics legible on small screens with stacked cards and restrained widths.

Note

Readable status surfaces are more effective than dense dashboards when users need to act quickly.

Example snippet

const progress = {
  completedLessons: 18,
  activePath: "Blue Team Foundations",
  streak: 6,
};

Recognition

Celebrate milestones without distracting from learning

Achievement callouts should feel premium, not noisy. Use soft borders, subtle gradients, and sparse iconography to reward learners while preserving the calm tone of a documentation-first experience.

What to emphasize

Promote mastery badges near relevant milestones.
Tie reward messaging to concrete learner outcomes.
Keep recognition components accessible in both compact and expanded layouts.

Note

Achievement language should reinforce progression and capability, not just gamification.

Example snippet

awardBadge({
  label: "Threat Hunter I",
  unlocked: true,
  earnedAt: "Week 2",
});

Competition

Encourage healthy competition with transparent rules

Leaderboards work best when expectations are explicit. Use accompanying docs content to explain scoring, tie-breakers, and fairness rules so learners understand how they advance.

What to emphasize

Document the ranking logic in plain language.
Use notes to clarify security challenge scoring windows.
Keep the interface motivational while avoiding excessive visual noise.

Note

A leaderboard should motivate consistent effort, not create ambiguity around how points are earned.

Example snippet

rankingScore = challengePoints + streakBonus + collaborationCredits;

Documentation

A modern, developer-centric knowledge surface for onboarding, platform guidance, and learner enablement.

Docs navigation

Explore topics

Browse the core workflows that shape the learner experience inside Next XyberSec.

Developer docs

Next XyberSec documentation

Build learner confidence with a polished, documentation-first experience that explains onboarding, platform flows, and product behavior in a format inspired by the best developer platforms.

Sections

Theme

Dark UI

Mode

UI Only

Overview

Boot up your cyber training workspace

What to emphasize

Launch guided learner onboarding in minutes.
Organize security lessons, labs, and milestones by path.
Keep documentation readable for beginners and operators alike.

Note

Use the docs hub as a central reference for learners, instructors, and internal enablement teams.

Example snippet

// app/(app)/docs/page.tsx
export default function DocsPage() {
  return <DocsLayout />;
}

Setup

Prepare the learning platform interface

What to emphasize

Keep the interface modular with isolated docs components.
Reuse motion patterns for navigation, search, and content transitions.
Maintain a polished experience across desktop and mobile breakpoints.

Note

Backend search, analytics, and content persistence are intentionally deferred until the UI contract is finalized.

Example snippet

npm install
npm run dev
# open /docs to review the documentation UI

Catalog

Structure curriculum like a product manual

What to emphasize

Break courses into mission-ready sections and prerequisites.
Surface examples, command snippets, and policy notes inline.
Guide users toward the next lesson without visual clutter.

Note

Treat every course module as a documented workflow: concise, skimmable, and action-oriented.

Example snippet

<CourseCard
  title="Network Defense Fundamentals"
  level="Beginner"
  modules={8}
/>

Insights

Show momentum with clear progress cues

Learners stay engaged when milestones are visible. The docs layout demonstrates how to combine narrative guidance with compact status components so progress feels immediate and measurable.

What to emphasize

Pair explanatory copy with progress summaries.
Use supportive callouts for checkpoint rules and completion criteria.
Keep metrics legible on small screens with stacked cards and restrained widths.

Note

Readable status surfaces are more effective than dense dashboards when users need to act quickly.

Example snippet

const progress = {
  completedLessons: 18,
  activePath: "Blue Team Foundations",
  streak: 6,
};

Recognition

Celebrate milestones without distracting from learning

Achievement callouts should feel premium, not noisy. Use soft borders, subtle gradients, and sparse iconography to reward learners while preserving the calm tone of a documentation-first experience.

What to emphasize

Promote mastery badges near relevant milestones.
Tie reward messaging to concrete learner outcomes.
Keep recognition components accessible in both compact and expanded layouts.

Note

Achievement language should reinforce progression and capability, not just gamification.

Example snippet

awardBadge({
  label: "Threat Hunter I",
  unlocked: true,
  earnedAt: "Week 2",
});

Competition

Encourage healthy competition with transparent rules

Leaderboards work best when expectations are explicit. Use accompanying docs content to explain scoring, tie-breakers, and fairness rules so learners understand how they advance.

What to emphasize

Document the ranking logic in plain language.
Use notes to clarify security challenge scoring windows.
Keep the interface motivational while avoiding excessive visual noise.

Note

A leaderboard should motivate consistent effort, not create ambiguity around how points are earned.

Example snippet

rankingScore = challengePoints + streakBonus + collaborationCredits;